Building a bootstrap accordion and want to add a class to whole panel

Question

I am building a bootstrap accordion and when i open a panel I want to apply a style to the whole panel when open and then remove it when closed. I am using CSS and jQuery. I've had a few problems trying to do this; it adds the class to every panel, it doesn't apply the class at all etc. I must admit I'm not the best at jquery but could someone help please. Thanks

This is the html:

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <i class="fa fa-chevron-down fa-lg"></i>
                    Stuff 1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body text-muted">
                  Stuff.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading text-muted" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <i class="fa fa-chevron-down fa-lg"></i>
                    Stuff 2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body text-muted">
                Stuff.
            </div>
        </div>
    </div>

This is the jquery:

$(document).ready(function(){
 $(".panel-heading").click(function(){
     $(".panel-default").toggleClass("panel-box-shadow");
 });
});

Answer 1

You can use Bootstrap collapse events:

//adds the class
$('.panel-collapse').on('shown.bs.collapse', function () {
  $(this).parent().addClass('panel-box-shadow');
});

//removes the class
$('.panel-collapse').on('hidden.bs.collapse', function () {
  $(this).parent().removeClass('panel-box-shadow');
});

$(this) in this context is your .panel-collapse div which is collapsing. If you use parent() on this element you will get your .panel and then you can add or remove class from this panel on proper event.

You can also use show and hide events (instead of shown and hidden) if you want.

When you use events like click, mouseover etc. $(this) inside this event will always refer to clicked/hovered etc. element. You could use $(this).parent() in your function instead of $(".panel-default") but the problem with this is that when you double click on your .panel-heading it will toggle panel-box-shadow class but your collapsible div will be opened so it's always better to use Bootstrap built-in events.