1

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

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.

  • ok but i am using custom theme – Magento 2 Aug 14 '15 at 4:17
  • is it have any custom script – Magento 2 Aug 14 '15 at 5:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.