Accordion tabs in magento For layered navigation

In this blog I’m going to explain you how to create accordion tabs in magento for layered navigation as displayed below for attributes.

Just navigate to your layered navigation file as shown:

app/design/frontend/default/{your folder}/template/catelog/layer/view.phtml

Then open that that file & paste the following jquery script at the end of the page:

<script type="text/javascript">
    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;
        });
    });
</script>

If you used different id’s, replace this with your id and save the file.
Refresh the cache and reload the browser to see the results.
Use no-conflict method in magento. It is a good practice to avoid javascript conflicts in the page.