0

I want to customize a sidebar filter in the category magento 1.

I have it customizable but when reloading, it shows the body part when the header is not clicked.

I want to click on the header, the body will display

My code:

<div class="filter-cmvn">
<div class="panel panel-default">
        <div class="panel-heading">
        <h3 class="panel-title">Geschlecht</h3>
        <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
    </div>
    <div class="panel-body" style="">
        <ol>
            <li>
                <a href="#">Damen<span class="count">(1265)</span></a>
            </li>
            <li>
                <a href="#">Herren<span class="count">(162)</span></a>
            </li>
        </ol>
    </div>
</div>

Js

<script>
jQuery(document).ready(function(e){
    jQuery(".panel-body").css("display","none");
    alert(1);
})
jQuery(document).on('click', '.panel-heading span.clickable', function(e){
    var thiss = jQuery(this);
    if(!thiss.hasClass('panel-collapsed')) {
        thiss.parents('.panel').find('.panel-body').slideUp();
        thiss.addClass('panel-collapsed');
        thiss.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    } else {
        thiss.parents('.panel').find('.panel-body').slideDown();
        thiss.removeClass('panel-collapsed');
        thiss.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }
})

enter image description here

1 Answer 1

0

You can hide the body by default with css and let jquery do the job for you.

    <style> 
        .panel-body {
            display: none;
        }
    </style>

    $('.panel-heading span.clickable').on('click', function(){
        $('.panel-body').slideToggle();
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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