Accordion tabs in magento For layered navigation

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

NOTE: 

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