Demo of simple tabs without jQuery UI

HOWARD_HUGES

by akshatha suchethan

HTML

<div id="tabs-container">
  <ul class="tabs-menu">
    <li class="current"><a href="#tab-1">Executive </a> |</li>
    <li><a href="#tab-2">Development</a> |</li>
    <li><a href="#tab-3">Leasing, Corporate and Operations</a></li>
  </ul>
  <div class="tab">
    <div id="tab-1" class="tab-content">
      <div class="content">
        <table class="tbl-staff">
          <tr>
            <td>
              <div class="imgWrap">
                <img class="img-responsive Staff grayscale" src="https://dragonfly.howardhughes.com/sites/P-CORPIT/Style%20Library/Contents/images/25_weinreb_david.jpg" style="width: 160px;" />
                <p class="font_m imgDescription">
                  <span class="w_800">David Weinreb</span>
                  <br /> Chief Executive Officer
                </p>
              </div>
            </td>
            <td>
              <div class="imgWrap">
                <img class="img-responsive Staff grayscale" src="https://dragonfly.howardhughes.com/sites/P-CORPIT/Style%20Library/Contents/images/56_grant_herlitz.jpg" style="width: 160px;" />
                <p class="font_m imgDescription">
                  <span class="w_800">Grant Herlitz</span>
                  <br /> President
                </p>
              </div>
            </td>
            <td>
              <div class="imgWrap">
                <img class="img-responsive Staff" src="https://dragonfly.howardhughes.com/sites/P-CORPIT/Style%20Library/Contents/images/58_richardson_andrew.jpg" style="width: 160px;" />
                <p class="font_m imgDescription">
                  <span class="w_800">Andrew C. Richardson</span>
                  <br /> Chief Financial Officer
                </p>
              </div>
            </td>
            <td>
              <div class="imgWrap">
                <img class="img-responsive Staff" src="https://dragonfly.howardhughes.com/sites/P-CORPIT/Style%20Library/Contents/images/57_riley_peter.jpg" style="width: 160px;" />
    ...

CSS

body {
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}

.tabs-menu {
  height: 30px;
  clear: both;
}

.tabs-menu li {
  height: 30px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
  color: #000;
  font-weight: bold;
}

.tabs-menu li.current {
  position: relative;
  z-index: 5;
}

.tabs-menu li a {
  padding: 10px;
  color: #000;
  text-decoration: none;
}

.tabs-menu .current a {
  color: #068dcd;
  ;
}

.tab {
  float: left;
  margin-bottom: 20px;
  width: auto;
}

.tab-content {
  width: 660px;
  padding: 20px;
  display: none;
}

#tab-1 {
  display: block;
}

JavaScript

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});