Accordion Nested in Tabs - Advertise

by freedawirl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container summary-list">
 <div class="row">


  <div class="col-md-12">
   <h2>
    Choose from options to place your ads on MetroBus, Metro Rapid or MetroRail.
   </h2>
   <br />
  </div>
  <div class="col-md-12">

   <ul id="tabNav" class="nav nav-tabs hidden-xs" role="tablist">
    <li role="presentation" class="active">
     <a href="#bus" aria-controls="open" role="tab" data-toggle="tab">MetroBus Ads</a>
    </li>
    <li role="presentation">
     <a href="#rapid" aria-controls="open" role="tab" data-toggle="tab">MetroRapid Ads</a>
    </li>
    <li role="presentation">
     <a href="#rail" aria-controls="open" role="tab" data-toggle="tab">MetroRail Ads</a>
    </li>
   </ul>
   <ul id="tabNav" class="nav nav-pills nav-stacked visible-xs" role="tablist">
    <li role="presentation" class="active">
     <a href="#bus" aria-controls="open" role="tab" data-toggle="tab">MetroBus Ads</a>
    </li>
    <li role="presentation">
     <a href="#rapid" aria-controls="open" role="tab" data-toggle="tab">MetroRapid Ads</a>
    </li>
    <li role="presentation">
     <a href="#rail" aria-controls="open" role="tab" data-toggle="tab">MetroRail Ads</a>
    </li>
   </ul>
   <br />
   <!--The Tab Contents-->
   <div class="tab-content responsive">
    <div role="tabpanel" class="tab-pane fade in active" id="bus">
     <div class="col-md-12">

      <h1>Advertising on MetroBus</h1>
      <p>See options by expanding the tabs below.</p>
      <ul>
       <li class="clearfix">
        <h2><a role="button" class="collapse-link collapsed" data-toggle="collapse" data-target="#king">King</a></h2>
        <div id="king" class="collapse">
         <div id="no-more-tables">
          <table class="table table-bordered table-striped table-condensed cf">
           <thead class="cf">
   ...

CSS

@import 'home-trip-planner.css';

/*@import 'responsive.css';*/

@import 'google-te.css';

/***********************************************************************************************************************
 * Font definitions 
 ************************************************************************************************************************/

@import 'https://fonts.googleapis.com/css?family=Roboto';

/*CMTA Blue #0069aa*/

h1,
.h1 {
  font-size: 36px;
}

h2,
.h2 {
  font-size: 30px;
  font-weight: 500;
}

h3,
.h3 {
  font-size: 24px;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 16px;
}

h6,
.h6 {
  font-size: 16px;
}


/*************************************************************************************
 * Skip content container
 *************************************************************************************/

div.skip {
  background-color: #013F80;
}

div.skip > a {
  color: #fff;
  margin-top: -10px;
  padding: 10px;
  margin: 20px;
  padding-left: 30px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

#content:focus {
  outline: none;
}

#content:before {
  /* hack to so skip scroll alignment for main content is adjusted for the fixed nav */
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: 150px;
  margin-top: -150px;
}


/********************************************************************************************
 * Assorted Utility Styles
 ********************************************************************************************/

.push-r {
  float: right;
  padding: 0px 0px 10px 30px;
}

.push-l {
  float: left;
  padding: 0px 30px 10px 0px;
}

.clear {
  clear: both;
}

.mimich2 {
  margin: 0px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  padding: 20px 0px;
}

.padme10 {
  padding: 10px;
}

.bgwhite {
  background: #fff;
}


/*General content border Styles*/

.border-top {
  border-top: 1px dotted...