jQuery .closest() in nested div

Question

I am going to create a collapsable nested panel with some data. But I fail to collapse it. I am using jQuery 1.11.1 bootstrap 3.3.7.I have inserted almost the whole code in order to make it more understandable. I am guessing it is due to .closest(); function fails to find the object in nested div. But I am not sure what is happening. The city panel gets collapsed very well but the region panel fails. I got no issues from browser console as well. My javascript:

$(document).ready(function () {
    $(document).on('click', '.panel-heading span.clickable', function (e) {
        var $this = $(this);
        if (!$this.hasClass('panel-collapsed')) {
            $this.closest('.panel-default').children('.panel-body').slideUp();
            $this.addClass('panel-collapsed');
            $this.find('em').removeClass('fa-toggle-up').addClass('fa-toggle-down');
        } else {
            $this.closest('.panel-default').children('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');
            $this.find('em').removeClass('fa-toggle-down').addClass('fa-toggle-up');
        }
    });
})

   



.panel {
  border: 0; }

.panel-container {
  padding-top: 20px; }

.panel-heading .fa-toggle-up, .panel-heading .fa-toggle-down {
  font-size: 17px; }

.panel-primary > .panel-heading {
  background-color: #30a5ff;
  color: #fff;
  border: none; }



.panel-primary .panel-settings:hover, .panel-primary .panel-toggle:hover, .panel-success .panel-settings:hover, .panel-success .panel-toggle:hover, .panel-info .panel-settings:hover, .panel-info .panel-toggle:hover, .panel-warning .panel-settings:hover, .panel-warning .panel-toggle:hover, .panel-danger .panel-settings:hover, .panel-danger .panel-toggle:hover {
  border: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4); }



.panel-heading {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.025em;
  height: 60px;
  line-height: 38px; }

.panel-default .panel-heading {
  background: #fff;
  border-bottom: 1px solid #e9ecf2;
  color: #444444; }

.panel-footer {
  background: #fff;
  border-top: 1px solid #e9ecf2; }

 
.panel .border-top, .panel .border-right, .panel .border-bottom, .panel .border-left {
  border-color: #e9ecf2; }

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row" id="firstCity">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">city
        <span class="pull-right clickable panel-toggle"><em
                                            class="fa fa-toggle-up"></em></span>
      </div>
      <div class="panel-body">

        <div class="row">
          <div class="col-md-12">
            <div class="panel panel-default">
              <div class="panel-heading">region
                <span class="pull-right clickable panel-toggle"><em
                                                            class="fa fa-toggle-up"></em></span>
              </div>
            </div>
            <div class="panel-body">
              <h4>smth</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The issue is with your HTML structure for the inner panel. You are not enclosing the 'panel-body' element within the 'panel'.

Change the HTML as below, this should fix the issue,

<div class="row" id="firstCity">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                city
                <span class="pull-right clickable panel-toggle">
                    <em class="fa fa-toggle-up"></em>
                </span>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                region
                                <span class="pull-right clickable panel-toggle">
                                    <em class="fa fa-toggle-up"></em>
                                </span>
                            </div>
                            <div class="panel-body">
                                <h4>smth</h4>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

You want to make sure the inner <div class="panel-body"> block comes right after the <div class="panel-heading">. Both of these should be siblings, nested under <div class="panel panel-default">.