Nested Accordion inside panel

by freedawirl

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="panel panel-primary">
  <div class="panel-heading clickable">
    <h3 class="panel-title">North</h3>
    <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
  </div>
  <div class="panel-body">

    <div class="panel panel-primary">
      <div class="panel-heading clickable panel-collapsed">
        <h3 class="panel-title">Ăśbersicht</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>



    <div class="panel panel-primary">
      <div class="panel-heading clickable panel-collapsed">
        <h3 class="panel-title">Export</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>


  </div>
</div>

CSS

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    display: inline-block;
}

JavaScript

$(document).on('click', '.panel-heading span.clickable', function(e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.closest('.panel').find('.panel-body').slideUp();
    $this.addClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  } else {
    $this.closest('.panel').find('.panel-body').slideDown();
    $this.removeClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }
});
$(document).on('click', '.panel div.clickable', function(e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.closest('.panel').find('.panel-body').slideUp();
    $this.addClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');
  } else {
    $this.closest('.panel').find('.panel-body').slideDown();
    $this.removeClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }
});
$(document).ready(function() {
  $('.panel-heading span.clickable').click();
  $('.panel div.clickable').click();
});