Bootstrap collapse and jQuery event

Question

$('.panel-title').click(function (e) {
  var item = $(e.target)

  // collapsed is a bootstrap class which comes off when a panel is open
  if (item.hasClass('collapsed')) {
    item.parent().parent().parent().css('background-color', 'pink')
  } else {
    item.parent().parent().parent().css('background-color', '#fff')
  }
})

My Codepen

Hello, I have a "logical" problem with my jQuery. The goal is to add a background when a panel is open (click 1). It works half way in the sense that the background is added correctly but only after 2 clicks. I guess it comes from the 1st line of my jQuery, when of the triggering of my event. But I do not know how to do otherwise.

An idea ? Thanks.

Answer 1

ANSWER UPDATE

You can add the class "collapsed" to your anchor.

From:

<a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>

to:

<a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle collapsed" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>

In this way you don't need to change anything to your JS code.

The example:

$('.panel-title').click(function (e) {
  var item = $(e.target)

  // collapsed is a bootstrap class which comes off when a panel is open
  if (item.hasClass('collapsed')) {
    item.parent().parent().parent().css('background-color', 'pink')
  } else {
    item.parent().parent().parent().css('background-color', '#fff')
  }
})

body {  background-color: #282a36; }

.container {
  margin: 0 auto;
  width: 800px;
}

button { margin: 3% auto; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
    <button class="btn btn-default" data-target="#modal" data-toggle="modal" href="#">Click here</button>
</div>
<!--Modal-->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal modal--help fade" id="modal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
                <h1 class="modal-title" id="myModalLabel">
                    Hello!
                </h1>
            </div>
            <div class="modal-body">
                <div class="panel-group" id="accordion">
                    <div class="panel-group_heading">
                        <h2 class="panel-group_heading_title">
                            <a aria-controls="collapseMain" aria-expanded="true" class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseMain">Click here.</a>
                        </h2>
                        <span class="indicator icon-arrow-top pull-right"></span>
                    </div>
                    <div class="panel-collapse collapse" id="collapseMain">
                        <div class="panel">
                            <div class="panel-heading">
                                <h2 class="panel-title">
                                    <a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle collapsed" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>
                                </h2>
                                <span class="indicator icon-plus pull-right"></span>
                            </div>
                            <div class="panel-collapse collapse" id="collapse1">
                                <div class="panel-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus maxime, asperiores nisi aspernatur dolores distinctio eaque voluptates, nam eligendi temporibus deleniti, quis sunt accusantium quod, voluptate dolorem voluptas commodi id.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

OLD ANSWER

As per charlietfl comment you can use collapse-events:

The example:

$('#collapse1').on('show.bs.collapse hide.bs.collapse', function (e) {
  if (e.type == 'show') {
    $(this).closest('.panel').css('background-color', 'pink')
  } else {
    $(this).closest('.panel').css('background-color', '#fff')
  }
})

body {  background-color: #282a36; }

.container {
  margin: 0 auto;
  width: 800px;
}

button { margin: 3% auto; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <button class="btn btn-default" data-target="#modal" data-toggle="modal" href="#">Click here</button>
</div>
<!--Modal-->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal modal--help fade" id="modal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
                <h1 class="modal-title" id="myModalLabel">
                    Hello!
                </h1>
            </div>
            <div class="modal-body">
                <div class="panel-group" id="accordion">
                    <div class="panel-group_heading">
                        <h2 class="panel-group_heading_title">
                            <a aria-controls="collapseMain" aria-expanded="true" class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseMain">Click here.</a>
                        </h2>
                        <span class="indicator icon-arrow-top pull-right"></span>
                    </div>
                    <div class="panel-collapse collapse" id="collapseMain">
                        <div class="panel">
                            <div class="panel-heading">
                                <h2 class="panel-title">
                                    <a aria-controls="collapse1" aria-expanded="true" class="accordion-toggle" data-parent="collapseMain" data-toggle="collapse" href="#collapse1">Click 1</a>
                                </h2>
                                <span class="indicator icon-plus pull-right"></span>
                            </div>
                            <div class="panel-collapse collapse" id="collapse1">
                                <div class="panel-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus maxime, asperiores nisi aspernatur dolores distinctio eaque voluptates, nam eligendi temporibus deleniti, quis sunt accusantium quod, voluptate dolorem voluptas commodi id.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>