Magento 1.9 Layered Navigation – Accordion in Layered Navigation Filter

layered-navigationmagento-1.9

I want an accordian in the leftside layered navigation filter. I tried this but it's not working:

<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
    <div class="block-title">
        <strong><span><?php echo $this->__('Shop By') ?></span></strong>
    </div>
    <div class="block-content">
        <?php if($this->canShowOptions()): ?>
            <p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
            <dl id="narrow-by-list">
                <?php $_filters = $this->getFilters() ?>
                <?php foreach ($_filters as $_filter): ?>
                <?php if($_filter->getItemsCount()): ?>
                    <dt>
                        <?php echo $this->__($_filter->getName()) ?>
                        <?php if ($removeUrl = Mage::helper('layerednavigation')->getRemoveUrl($_filter)): ?>
                            <a class="btn-remove" href="<?php echo $removeUrl ?>" title="<?php echo $this->__('Clear All') ?>"><?php echo $this->__('Clear All') ?></a>
                        <?php endif ?>
                    </dt>
                    <dd><?php echo $_filter->getHtml() ?></dd>
                <?php endif; ?>
                <?php endforeach; ?>
            </dl>
            <script type="text/javascript">decorateDataList('narrow-by-list')</script>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#narrow-by-list').SnsAccordion({
            btn_open: '<i class="fa fa-caret-down"></i>',
            btn_close: '<i class="fa fa-caret-up"></i>',
            accordion: false,
            expand: false
        }); 
    });
</script>

Best Answer

In magento RWD theme, they have a built-in accordion feature.

But it is only for screen size is below 1000px.

So you have to change that file.

Step 1:

Copy the skin/frontend/rwd/default/js/app.js file into your theme.

step2:

Then change the following lines.

955,972,993

 screen and (max-width: 1000px) 
 screen and (max-width: ' + bp.medium + 'px)

In these change the Max width as 1900.

Now you can get accordion in all screen sizes.

Related Topic