jQuery Tabs

Simple tabs using simple HTML, CSS and jQuery.

by Daniel Pegues

HTML

<div class="first">
  <ul class="accordion_head">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <ul class="accordion_body">
    <li class="active">
      Ut lacinia gravida nisi, id tincidunt orci volutpat a. Morbi non dolor sollicitudin, rutrum odio et, sollicitudin orci. Nulla aliquet, nunc eget gravida molestie, eros elit viverra augue, at hendrerit nibh dolor vel urna.
    </li>
    <li>
      Vestibulum rhoncus leo ut augue dictum venenatis. Suspendisse a enim auctor diam viverra consequat nec non nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque arcu dui, id malesuada quam bibendum eu. Maecenas faucibus fringilla nibh, quis facilisis metus iaculis vel. In euismod eleifend venenatis. Sed sit amet tempor augue, sit amet
      scelerisque magna.
    </li>
  </ul>
</div>

<div class="second">
  <ul class="accordion_head">
    <li class="active">Tab A</li>
    <li>Tab B</li>
  </ul>
  <div class="this_is_a_blank"></div>
  <ul class="accordion_body">
    <li class="active">
      Ut lacinia gravida nisi, id tincidunt orci volutpat a. Morbi non dolor sollicitudin, rutrum odio et, sollicitudin orci. Nulla aliquet, nunc eget gravida molestie, eros elit viverra augue, at hendrerit nibh dolor vel urna.
    </li>
    <li>
      Vestibulum rhoncus leo ut augue dictum venenatis. Suspendisse a enim auctor diam viverra consequat nec non nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </li>
  </ul>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: #000;
  font-family: Arial, Helvetica, Sans-serif;
}

.first {
  width: 49%;
  float: left;
}

.second {
  width: 49%;
  float: right;
}


/* Accordion Head */

ul.accordion_head {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #e8e8e3;
}

ul.accordion_head::before,
ul.accordion_head::after {
  clear: both;
  display: table;
  content: ' ';
  overflow: hidden;
  visibility: hidden;
}

ul.accordion_head li {
  padding: 15px 0 16px;
  display: block;
  float: left;
  width: 50%;
  color: #9d9d9d;
  font-size: 0.90em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background-color: #e8e8e3;
  -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  -ms-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.first ul.accordion_head li {
  width: 33.33%;
}

ul.accordion_head li:hover {
  background-color: #efefef;
}

ul.accordion_head li.active {
  color: #41909d;
  background-color: #fff;
}


/* Accordion Body */

ul.accordion_body {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.accordion_body::before,
ul.accordion_body::after {
  clear: both;
  display: table;
  content: ' ';
  overflow: hidden;
  visibility: hidden;
}

ul.accordion_body li {
  display: none;
}

ul.accordion_body li.active {
  display: block;
}

JavaScript

/* Accordion */
$('.accordion_head li').on('click', function() {
  var curIndex = $(this).index();
  console.log('Current index for the selected li is: ' + curIndex);

  if (!$(this).hasClass('active')) {

    /* Accordion Head */
    // Remove class 'active' from all 'li' in 'accordion_head'
    $(this).parent().find('li').removeClass('active');

    // Add class 'active' to 'this'
    $(this).addClass('active');

    /* Accordion Body */
    // Remove class 'active' from all 'li' in 'accordion_body'
    $(this).parent().nextAll('.accordion_body:first').find('li').removeClass('active');

    // Add class 'active'  in 'accordion_body' li from 'accordion_head' this
    $(this).parent().nextAll('.accordion_body:first').find('li').eq(curIndex).addClass('active');
  }
});