Using jQuery Accordion for Magento's Layered Navigation

In Magento store, default layered navigation can be very long, which may not be ideal if you have a long list of product attributes, and want to show off many more Magento features at the side column. With this concern in mind, I decided to implement jQuery Accordion to my Magento theme.

Note: jQuery has an Accordion plugin, but in this tutorial I will just focus on simple Accordion using UI/Accordion

  1. Step 1: Download jQuery script
  2. Step 2: Locate Layered Nav file
  3. Step 3: Edit the following CSS
  4. Final result (screen shot only)
  5. Why not use the built-in Varien's accordion instead?

  • Step 1: Download jQuery script

    The only jQuery file you need for the accordion is : jquery-1.2.6.pack.js. Go to jQuery site to download the file, places it in js/jquery and add the link to the page.xml or place it directly in your Magento template.

    Using jQuery in Magento can be quite a frustrating experience as you keep finding it either won't work or break other scripts. The major reason is the incompatibility with scriptaculous script however I have also found that, jQuery can disable other Varien script, take the OPC and the script for region/state select in the Cart page and Checkout page for example. My experience shows the safest way to use jQuery to call the file directly from the template instead of page.xml.

    Note: Some people in the Magento community have reported that jQuery v1.2.6 breaks the prototype script, which is the default JS framework for Magento. My finding is, it' not prototype.js that is conflicting with jQuery, but the scriptaculous scripts. In the v1.1.6, Magento has upgraded to prototype v1.6.0.2, however, the scriptaculous has not been updated. So if you wish to user jQuery v1.2.6, you must upgrade your scriptaculous.js to v1.8.1.

  • Step 2: Locate Layered Nav file

    In the design/frontend/default/yourtheme/catalog/layer/view.phtml is where Layered Navigation is, and the only line to edit is this: eid this line in the layered nav code 

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

    You can call the accordion directly from the above file, but in this example, I am going to call it directly from 2columns-left instead.

    Go ahead placing the above code in the <head> section: 

    	<head>	<?php echo $this->getChildHtml('head') ?>	<script type="text/javascript" src="http://your-magento-store.com/js/jquery/jquery-1.2.6.pack.js"></script> 	<script type="text/javascript">	var $j = jQuery.noConflict();	$j(document).ready(function(){ 	$j("dl#narrow-by-list> dd:not(:first)").hide();	$j("dl#narrow-by-list> dt a").click(function(){	$j("dl#narrow-by-list> dd:visible").slideUp("fast");	$j(this).parent().next().slideDown("fast");	return false;	});	});	</script>     		  	</head>
  • Step 3: Edit the following CSS

      

    	dl#narrow-by-list dt a{color:#191513;font-size: 1em;background:url(../images/base_images/input_bg.gif) repeat-x;display: block;padding: 3px 5px 4px 10px;outline: 0;border-bottom: 1px solid #e5decd;}	dl#narrow-by-list dt a:hover{background:url(../images/base_images/pager_bg.gif) repeat-x left bottom;border-bottom: 1px solid #e5decd;text-decoration: none;}	dl#narrow-by-list dt a.selected {background: url(../images/base_images/icon-arrow-up.gif) no-repeat left center; padding-left: 20px;}	dl#narrow-by-list dt a span {background: url(../images/base_images/icon-arrow-down.gif) no-repeat left center; padding-left: 16px;}	dl#narrow-by-list dd {font-size:1em;	display: block; border-bottom: 1px dotted #e7e1a7;	padding: 5px 5px 5px 19px;}	dl#narrow-by-list dd a {font-size: .9em;}
  • And here the final result.

    accordion example for jquery layer nav

  • Why not use the built-in Varien's accordion instead?

    Magento already has an Accordion script, why not used it instead? Well, you certain can. Every web designer has his/her preferences when it comes to using script libraries. For me, jQuery is lightweight, and unobstructive therefor I find it a great enhancement for my Magento projects.