Layered Collapsible Navigation

Question

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.

Answer 1

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.

Answer 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>

Answer 3

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

Answer 4

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;
        });
    });