Showing posts with label Layered Navigation. Show all posts
Showing posts with label Layered Navigation. Show all posts

Saturday, 22 February 2014

Accordion Menu for Magento Layered Navigation

Now you need to edit view.phtml which is located in:
/app/design/frontend/default/default/template/catalog/layer/view.phtml
If you not found view.phtml file there, then go:
/app/design/frontend/base/default/template/catalog/layer/view.phtml
Then open the view.phtml you will see the following code in that page:

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

Now you need to add an anchor element in “dt” like so:

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

After that add the following code in the bottom of view.phtml :

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