Collapsible magento layered navigation

Question

did anyone know to make magento layered navigation collapse and expand

i found this code but i am not sure to do with jquery with the dd dt class

<dl id="narrow-by-list">
    <?php $_filters = $this->getFilters() ?>
    <?php foreach ($_filters as $_filter): ?>
        <?php if($_filter->getItemsCount()): ?>
            <dt><?php echo $this->__($_filter->getName()) ?></dt>
            <dd><?php echo $_filter->getHtml() ?></dd>
        <?php endif; ?>
    <?php endforeach; ?>
</dl>

Answer 1

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

Answer 2

1) Include jQuery library in your theme (you might have to use NoConflict Mode) 2) Modify template/category/layer/view.phtml file in your theme in a following way.

A) Change <dt><?php echo $this->__($_filter->getName()) ?></dt>

to <dt><a href="/"><?php echo $this->__($_filter->getName()) ?></a></dt>

As you see, we wrapper the attribute filter name in the so it becomes clickable link.

B) then include the jquery code snippet in the same view.phtml

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery("dl#narrow-by-list> dd:not(:first)").hide();
jQuery("dl#narrow-by-list> dt a").click(function(){
jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return false;
});
});
/* ]]> */
</script> 

Answer 3

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery("dl#narrow-by-list> dd").show();
jQuery("dl#narrow-by-list> dt").click(function(){
jQuery(this).next("dd").slideToggle("slow");
return false;
});
});
</script>