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="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Park & Ride locations</h2>

      <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">Great Hills</h3>
              <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
            </div>
            <div class="panel-body">
              <div class="route-map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d220245.02621825348!2d-97.8326187!3d30.3984194!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644cc83c6604c8d%3A0xb1d54c35c53b0317!2sGreat+Hills+Capital+Metro+Park+%26+Ride!5e0!3m2!1sen!2sus!4v1502237518059"
                width="100%" height="300" frameborder="0" style="border: 0px;"></iframe>
                  </div>
                <div class="route-badges">
                  <a class="label" href="/schedmap/?svc=0&amp;f1=3&amp;s=0&amp;d=N"><span class="badge">3</span> Burnet/Manchaca</a>
                  <a class="label" href="/schedmap/?svc=0&amp;f1=383&amp;s=0&amp;d=N"><span class="badge">383</span> Research</a>
                  <a class="label" href="/schedmap/?svc=0&amp;f1=392&amp;s=0&amp;d=E"><span class="badge">392</span> Braker</a>
                  <a class="label" href="/schedmap/?svc=4&amp;f1=982&amp;s=0&amp;d=N"><span class="badge">982</span> Pavilion Express</a>
                  <a class="label" href="/schedmap/?svc=4&amp;f1=983&amp;s=0&amp;d=N"><span class="badge">983</span>...

CSS

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

.route-badges .label {
  background: #f5f5f5;
  display: inline-block;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin: 0 0 4px 4px;
}

.route-badges .label .badge {
  display: inline-block;
  min-width: 10px;
  padding: 5px 10px;
  font-size: 100%;
  font-weight: 600;
  color: #fff;
  background-color: #777;
  border-radius: 5px;
}

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();
});
*/