1

I have installed Magento 1.9.0.0 and have started tweaking the rwd theme. I want to collapse the filters list on product listings so that only the headers show and you can click on the header to see your options for that filter. I am far from being an expert in Magento and despite digging around in the files and googling for answers for some time I am none the wiser. Can anyone help?

3

Try This

    jQuery(document).ready(function($) {
    var dt = jQuery('#narrow-by-list dt'),
        dd = jQuery('#narrow-by-list dd');
        dt.next().hide();
        dd.first().show();
        dt.first().addClass('active');
        dt.click(function(){
            jQuery(this).toggleClass('active').next().slideToggle();
    })
    });
  • Thanks Ahmed, where will I put that? – Alistair67 Aug 21 '15 at 14:55
  • Anywhere is your site, footer.phtml will work – Ahmed Elawadi Aug 21 '15 at 15:12
  • Once I'd remembered to put this between <script></script> tags, this worked beautifully. The Price filter remains open but can be shut and all the others are closed and can be toggled open and shut. Thanks again Ahmed. – Alistair67 Aug 21 '15 at 15:59
  • still a perfectly good solution in 2017 :) – iphigenie Jan 21 '18 at 14:27
0

If you don't want to collapse the first filter automatically, you can use the following snippet (just two parts out commented):

<script>
    jQuery(document).ready(function($) {
    var dt = jQuery('#narrow-by-list dt'),
        dd = jQuery('#narrow-by-list dd');
        dt.next().hide();
//         dd.first().show();
//         dt.first().addClass('active');
        dt.click(function(){
            jQuery(this).toggleClass('active').next().slideToggle();
    })
    }); 
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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