0

I would like to replicate this side layered collapsible navigation on our website. This site is built using Magento, but does anyone know where I will be able to find this extension that was used to create the side column layered navigation on this site http://www.tightsplease.co.uk/tpgb/tights-online.html ?

I’m assuming it was a free or paid extension.

I have also attached a screenshot to hopefully explain exactly what I mean http://iforce.co.nz/i/35bdmjvl.lle.jpg I also like the way they did the price search.

4 Answers 4

2

I think you are looking for Amasty Improved Navigation Pro https://amasty.com/improved-layered-navigation.html

It's not free, but worth the price.

1
  • We're using this plugin in almost every Magento website, it's really worth the price!
    – Roy
    Oct 22, 2015 at 10:27
2

try this in your catalog/layer/view.phtml

<script type="text/javascript">
                jQuery(function($){
                    $(".block-layered-nav dt").click(function(){
                        if($(this).next("dd").css("display") == "none"){
                            $(this).next("dd").slideDown(1000);
                            $(this).removeClass("closed");
                        } else {
                            $(this).next("dd").slideUp(1000);
                            $(this).addClass("closed");
                        }
                    });
                });
            </script>
1
  • Can this open with all in collapsed position except the first one? And what would be the css to display to the user, click to open or collapse? Feb 27, 2016 at 17:32
1

Just add this at the end of catalog/layer/view.phtml file.


    jQuery(document).ready(function(){
        jQuery("dl#narrow-by-list> dd").hide();
        jQuery("dl#narrow-by-list> dt").click(function(){
            jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
            jQuery(this).next("dd").slideToggle("fast");
            return false;
        });
    });

No need to spend money with simple features...
Hope this helps

2
  • Great solution. How can you add css to display, click to open? Feb 27, 2016 at 17:26
  • this option don;t let the expanded box close!
    – Mr.Devops
    Jun 28, 2021 at 10:46
0

This Works like Charm

jQuery(document).ready(function($){
   $("dl#narrow-by-list> dd:not()").hide();
$("dl#narrow-by-list> dt a").addClass('selected'); 
$("dl#narrow-by-list> dt a").click(function(){
            $("dl#narrow-by-list> dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
            return false;
        });
    });
2
  • Can you add more details as to how it works?
    – tjons
    Feb 9, 2017 at 2:41
  • Add this here /app/design/frontend/yourtheme/template/catalog/layer/view.phtml
    – nzgeek
    Jun 26, 2018 at 4:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.