DM Tools Tabs

by Brandon

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">General</a></li>
    <li><a href="#tab2" style="display:none;">Assesment</a></li>
    <li><a href="#tab3">Access &amp; Software License</a></li>
    <li><a href="#tab4">ITSM Governance</a></li>
    
    <li><a href="#tab5">Technical Data</a></li>
    <li><a href="#tab6">Training</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <!--quad start-->
      <div class="d-table">
        <div class="d-row">
          <div class="d-cell ul">
            <div>
              <h2>Overview</h2>
              <label for="tool_id">Tool ID: </label>
              <span name="tool_id">T-0001</span>
              <br>
              <label for="capability_name">Capability Name: </label>
              <span name="capability_name">AAA (Account Activation Tool)</span>
              <br>
              <label for="acronym">Acronym / AKA: </label>
              <span name="acronym">AAA</span>
              <br>
              <label for="software_version">Software Version: </label>
              <span name="software_version">Unknown</span>
              <br>
              <label for="software_type">Software Type: </label>
              <span name="software_type">Data Not Available</span>
              <br>
              <label for="tool_status">Status of Tool: </label>
              <span name="tool_status">Data Not Available</span>
              <br>
              <label for="software_category">Software Category: </label>
              <span name="software_category">Data Not Available</span>
              <br>
              <label for="overview_description">Description: </label>
              <div name="overview_description" class="text">Central repository warehouse system that can pull data from multiple sources and store a copy of that data. This allows for Business intelligence tables that can...

CSS

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

.tabs {
  width: 100%;
  display: inline-block;
}


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


/* Clearfix */

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

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

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

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

.tab-links a:hover {
  background: rgb(62, 98, 163);
  color: #FFF !important;
  text-decoration: none;
  border: solid 1px tan;
}

.tab-links a:visited {
  background: rgb(62, 98, 163);
  color: #FFF !important;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: rgb(62, 98, 143);
  color: #FFF !important;
}

li.active a:visited {
  background: rgb(62, 98, 143);
  color: #FFF !important;
}


/*----- Content of Tabs -----*/
label {
  font-weight:bold;
}

.toolname {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}

.tab-content {
  font-size: 1.2em;
  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;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}

.col1,
.col2 {
  display: inline-block;
  width: 30%;
  vertical-align: top;
}

.tab-content li:hover {
  background: #CCC;
}

.tab-content a {
  display: block;
  padding-left: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
}

/*----Div Quads---*/

.d-table {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%; 
}

.d-row {
  display: table-row;
}

.d-cell {
  display: table-cell;
}

label {
  display:inline-block;
...

JavaScript

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

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


    e.preventDefault();
  });
});