Transformer Tabs

index.html

<div class="tabs">
  
  <nav role='navigation' class="transformer-tabs">
    <ul>
      <li><a href="#tab-1">Important Tab</a></li>
      <li><a href="#tab-2" class="active">Smurfvision</a></li>
      <li><a href="#tab-3">Monster Truck Rally</a></li>
      <li><a href="http://google.com">Go To Google &rarr;</a></li>
    </ul>
  </nav>
  
  <div id="tab-1">
    <h2>Tab 1</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum non iure magnam dolores earum nemo quo tempora ab unde! Nesciunt ea iste impedit suscipit cupiditate quam earum explicabo quas veniam doloribus sed aut aliquam repellendus deleniti laudantium molestias fuga nihil quidem voluptatum atque sapiente perferendis facilis. Tempora mollitia odio?
  </div>
  
  <div id="tab-2" class="active">
    <h2>Tab 2</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur est natus esse minima nihil quidem tenetur alias pariatur. Obcaecati repudiandae temporibus provident sapiente iure doloribus praesentium voluptates dolores quia eos velit fugit cum ipsam. Deleniti fugiat maxime vel tempore illum esse illo fugit quam recusandae aut aperiam omnis at quaerat!
  </div>
  
  <div id="tab-3">
    <h2>Tab 3</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores numquam cupiditate aliquam quisquam repellendus fugit eaque asperiores voluptatem ut accusamus soluta corporis in facere quae provident itaque magni eum repellat ducimus dolore. Beatae aperiam accusamus at voluptatem ad sunt mollitia perspiciatis tempora numquam rerum aliquam deserunt illum necessitatibus nisi omnis.
  </div>
  
  <div id="tab-4">
    <h2>Tab 4</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis impedit ut culpa quaerat error pariatur voluptatum sapiente alias quasi itaque voluptas expedita necessitatibus odio dolorem totam veniam quisquam nulla vero placeat corporis cupiditate assumenda amet inventore mollitia quidem similique laudantium maxime aperiam ea reprehenderit iusto a ad tempora harum.
  </div>
  
</div>

script.js

var Tabs = {

  init: function() {
    this.bindUIfunctions();
    this.pageLoadCorrectTab();
  },

  bindUIfunctions: function() {

    // Delegation
    $(document)
      .on("click", ".transformer-tabs a[href^='#']:not('.active')", function(event) {
        Tabs.changeTab(this.hash);
        event.preventDefault();
      })
      .on("click", ".transformer-tabs a.active", function(event) {
        Tabs.toggleMobileMenu(event, this);
        event.preventDefault();
      });

  },

  changeTab: function(hash) {

    var anchor = $("[href=" + hash + "]");
    var div = $(hash);

    // activate correct anchor (visually)
    anchor.addClass("active").parent().siblings().find("a").removeClass("active");

    // activate correct div (visually)
    div.addClass("active").siblings().removeClass("active");

    // update URL, no history addition
    // You'd have this active in a real situation, but it causes issues in an <iframe> (like here on CodePen) in Firefox. So commenting out.
    // window.history.replaceState("", "", hash);

    // Close menu, in case mobile
    anchor.closest("ul").removeClass("open");

  },

  // If the page has a hash on load, go to that tab
  pageLoadCorrectTab: function() {
    this.changeTab(document.location.hash);
  },

  toggleMobileMenu: function(event, el) {
    $(el).closest("ul").toggleClass("open");
  }

}

Tabs.init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

.transformer-tabs {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 3px solid white;
  }
  li {
    display: inline-block;
    padding: 0;
    vertical-align: bottom;
    &:nth-child(1) .active {
      color: lighten(#9b59b6, 20%);
      border-bottom-color: #9b59b6;
    }
    &:nth-child(2) .active {
      color: lighten(#3498db, 20%);
      border-bottom-color: #3498db;
    }
    &:nth-child(3) .active {
      color: lighten(#e67e22, 20%);
      border-bottom-color: #e67e22;
    }
    &:nth-child(4) .active {
      color: lighten(#c0392b, 20%);
      border-bottom-color: #c0392b;
    }
  }
  a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 0.5rem;
    &.active {
      border-bottom: 3px solid transparent;
      position: relative;
      bottom: -3px;
    }
  }
  @media (max-width: 700px) {
    ul {
      border-bottom: 0;
      overflow: hidden;
      position: relative;
      background: #666; /* fallback */
      background: linear-gradient(#666, #222);
      &::after {
        content: "☰";
        position: absolute;
        top: 8px;
        right: 15px;
        z-index: 2;
        pointer-events: none;
      }
      &.open {
        a {
          position: relative;
          display: block;
        }
      }
    }
    li {
      display: block;
    }
    a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &.active {
        border: 0;
        z-index: 1;
        background: #666; /* fallback */
        background: linear-gradient(#666, #222);
      }
    }
  }
}

.tabs {
  > div {
    display: none;
    padding: 1rem;
    &:nth-of-type(1) {
      background: #9b59b6; 
    }
    &:nth-of-type(2) {
      background: #3498db; 
    }
    &:nth-of-type(3) {
      background: #e67e22; 
    }
    &:nth-of-type(4) {
      background: #c0392b; 
    }
  }
  > .active {
    display: block;
  }
}

body {
  padding: 1rem;
  background: #333;
  color: white;
  font: 100%/1.4 Sans-Serif;
}

transformer-tabs.markdown

Transformer Tabs

RWD n stuff!

One set of semantic HTML. One set of JS.

Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system.

I used to use <select> sometimes for this but that's different markup and different JS and that sucks. Plus this is easier (funner) to style.

A Pen by Chris Coyier on CodePen.

License.