Innovation

Innovation

by Brandon

HTML

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">4.1 TRP</a></li>
    <li><a href="#tab2">4.2 Technical Direction</a></li>
    <li><a href="#tab3">4.3 ONE-Net / DCAO</a></li>
    <li><a href="#tab4">4.4 Capabilities and Services</a></li>
    <li><a href="#tab5">4.5 Commercial Capabilities</a></li>
    <li><a href="#tab6">4.6 Industry</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <div>
        <h2>4.1 TRP Tasks</h2>
        <div class="objectives">
          Leverage TRP to facilitate increased technology innovation and more rapid refresh (e.g. JIE)
        </div>
        <ul>
          <li> <a class="accordion-section-title" href="#accordion-411"><strong>4.1.1</strong> Installation Processing Node (IPN) Security Stack (SS) Limited Deployment</a>
            <div id="accordion-411" class="object_bounds">
              <table class="actionItems">
                <thead>
                  <tr>
                    <th>Action</th>
                    <th>Task Owner</th>
                    <th>Due Date</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>N/A</td>
                    <td>N/A</td>
                    <td>N/A</td>
                    <td>N/A</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </li>
          <li> <a class="accordion-section-title" href="#accordion-412"><strong>4.1.2</strong> Joint Multi-Protocol Lable Switching (MPLS)</a>
            <div id="accordion-412" class="object_bounds">
              <table class="actionItems">
                <thead>
                  <tr>
                    <th>Action</th>
                    <th>Task Owner</th>
                    <th>Due Date</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                ...

CSS

h1 {
  color: #FFF;
}

h1 > span {
  font-size: .75em
}

h2,
h3 {
  margin-left: 10px;
  margin-bottom: 0;
  padding-left: 0;
  padding-bottom: 0;
}

ul {
  padding-left: 10px;
  padding-top: 0;
  margin-top: 5px;
}

li {
  list-style-type: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

div.tab > div > ul > li::before {
  content: "III";
  padding: 0 5px 0 5px;
  float: left;
  transform: rotate(-90deg);
  transition: .1s;
  text-shadow: 1px 1px 1px #223B59;
  font-family: sans-serif;
  color: white;
}

.objectives {
  width: 95%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 10px 10px 10px 10px;
  border-right: #ccc 1px solid;
  vertical-align: middle;
  background: white;
  border-top: #ccc 1px solid;
  border-bottom: #ccc 1px solid;
  border-left: #ccc 1px solid;
  opacity: .95;
  box-shadow: 0px 0px 4px #aaa;
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
}

.header {
  background-color: green;
  height: 100px;
  padding: 10px;
}


/*----- Tabs -----*/

.tabs {
  width: 100%;
  display: inline-block;
  margin-top: 40px;
}


/*----- Tab Links -----*/


/* Clearfix */

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links {
  padding: 0;
  margin: 0;
}

.tab-links > li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

.tab-links a {
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
  border-radius: 6px 6px 0px 0px;
  
  border: #000 1px solid;
  background: #CCC;
  font-size: .75em;
  font-weight: 600;
  color: #000 !important;
  transition: all linear 0.15s;
}

ul.tab-links > li > a:hover {
  background: lightgreen;
  color: #000 !important;
  text-decoration: none;
}

.tab-links > li > a:visited {
  background: #CCC;
  color: #000 !important;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: green;
  color: #000 !important;
}

li.active a:visited {
  background: green;
  color: #FFF...

JavaScript

$(document).ready(function() {

  //tabs
  $('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    console.log(currentAttrValue);
    
    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

    // Change/remove current tab to active
    $(this).parent('li').addClass('active').siblings().removeClass('active');


    e.preventDefault();
  });



  //accordians
  function close_accordion_section() {
    $('.accordion-section-title').removeClass('active');
    $('.object_bounds').slideUp(150).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');
    console.log(currentAttrValue);

    if ($(this).hasClass('active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $(currentAttrValue).slideDown(150).addClass('open');
    }

    e.preventDefault();
  });

});