PHP Magento Tips

Accordion tabs in Magento For Layered Navigation

Rate this posting:
{[['']]}

To crate Accordion styled tabs in Magento For Layered Navigation follow below step:

Step 1:

In app/design/frontend/rwd/default/template/catalog/layer/view.phtml
add below code at the end of the page.

<script>

var $j= jQuery.noConflict();// no conflict method

$j (document).ready(function(){

$j("#narrow-by-list > dt").click(function(){

if(false == $j(this).next().is(':visible')) {

$j('#narrow-by-list dd').slideUp(300);

}

$j(this).next().slideToggle(300);

});

$j('#narrow-by-list dd').hide();

$j('#narrow-by-list dd:eq(0)').show();

});


</script>

#narrow-by-list is the id used in that file <dl id="narrow-by-list">. 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.

There is also another Script which works well to make stylish Accordian style layered navigation. Which is alternative of the above script:

<script>

jQuery(document).ready(function(){

// Adds open and close option for sidebar filters

 jQuery('dl#narrow-by-list > dt:first').addClass('expanded');

    jQuery('dl#narrow-by-list > dd').slice(1).hide();

    jQuery('dl#narrow-by-list > dt').click(function(){

     jQuery(this).next().slideToggle('slow');

     jQuery(this).toggleClass('expanded');

     return false;

    });

});

</script>



Tag : Magento
6 Comments On "Accordion tabs in Magento For Layered Navigation"

there is no file in file-path what you mentioned above

Hello, Jeeva...Pls. check now. I updated my post.

no improvement, not working. Below are my code and your script work.

https://www.dropbox.com/s/2xesndzbnkkkjwd/view.phtml?dl=0

Hi...Check my code its working fine here...
https://www.dropbox.com/s/3ogj9g8rlpu46ii/view.phtml?dl=0

you have add that code inside div tag.
Just put this code at last. Not within any tag.

I am using your code,
https://www.dropbox.com/s/3ogj9g8rlpu46ii/view.phtml?dl=0
still not working........
error screen shots : https://snag.gy/MN0tvL.jpg

Hi..This code is working correctly in Default Magento Theme. It may be possible that you use custom theme and therefore some class not there. Because of that Jquery not working properly. Please check your class which i used inside jquery.

Back To Top