Magento Accordion Menu for Layered Navigation

One of the Most powerful feature in Magento is layer Navgation for filtering the Result .Based on the Attribute filter get work but some time attributes are more so layer navigation become lengthy and we need to scroll down more which is bad impression on site so we can add accordan menu for that which will allow   accordon for each atribute



1) First download the updated version of JS form here.if it is there in your site no need

Put your jQuery file in the "js" folder located in the root (or Magento) directory. You can create a new folder called "jquery". The Scriptaculous code is also located in "js" folder.

For noConflict part,
add if required
jQuery.noConflict();

2)Second add the Js in page.xml

<action method="addJs"><script>jquery/jquery-version.min.js</script></action>

3)Third Modify view.phtml located at app/design/frontend/yourthem/template/catalog/layer

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

All we need is call the ID, "narrow-by-list" from jQuery, and add an anchor element in "dt" like so:

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

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

as "narrow-by-list" css is there so no need to add as per your theme need to chnaged if required

and that's refresh the cache it will work