Accordion Nested in Tabs - PC

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-sm-10 col-md-10 col-lg-8 summary-list">
   <div id="optionsHeader" class="col-md-12">
    <h2>Intro Paragraph.</h2>
   </div>
   <div id="adOptions">
    <ul id="tabNav" class="nav nav-pills hidden-xs" role="tablist">
     <li role="presentation" class="active">
      <a href="#intro" aria-controls="open" role="tab" data-toggle="tab" aria-expanded="true">
      Introduction
      </a>
     </li>
     <li role="presentation" class="">
      <a href="#needs" aria-controls="open" role="tab" data-toggle="tab" aria-expanded="false">
       Needs
      </a>
     </li>
     <li role="presentation" class="">
      <a href="#goal" aria-controls="open" role="tab" data-toggle="tab" aria-expanded="false">
       Goals
      </a>
     </li>
    </ul>

    <ul id="tabNav" class="nav nav-pills nav-stacked visible-xs" role="tablist">
     <li role="presentation" class="">
      <a href="#intro" aria-controls="open" role="tab" data-toggle="tab">
       Introduction
      </a>
     </li>
     <li role="presentation">
      <a href="#needs" aria-controls="open" role="tab" data-toggle="tab">
       Needs
      </a>
     </li>
     <li role="presentation">
      <a href="#goal" aria-controls="open" role="tab" data-toggle="tab">
       Goals
      </a>
     </li>
    </ul>
    
    
    <br>
    <div class="tab-content responsive">
     <div role="tabpanel" class="tab-pane fade active in" id="intro">
      <div class="col-md-12">
       <h1>Project Connect</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="#Iitem1">Intro Item1</a>
         </h2>
         <div...

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...