Tabbed mobile content view - jQuery

index.html

<header class="masthead">
  MASTHEAD
</header>
<section class="upper-content">
  <img src="https://placeimg.com/250/250/people" />
  <h1>Person, 34</h1>
  <div>Location</div>
</section>
<nav class="h-scroller">
  <div class="tabs">
    <a href="#tab1" class="tab-link tab-link--complete" data-tab="tab-1">
      <span class="tab-link__label">TAB 1</span>
    </a>
    <a href="#tab2" class="tab-link tab-link--complete" data-tab="tab-2">
      <span class="tab-link__label">TAB 2</span>
    </a>
    <a href="#tab3" class="tab-link" data-tab="tab-3">
      <span class="tab-link__label">TAB 3</span>
    </a>
    <a href="#tab4" class="tab-link tab-link--complete" data-tab="tab-4">
      <span class="tab-link__label">TAB 4</span>
    </a>
    <a href="#tab5" class="tab-link" data-tab="tab-5">
      <span class="tab-link__label">TAB 5</span>
    </a>
    <a href="#tab6" class="tab-link" data-tab="tab-6">
      <span class="tab-link__label">TAB 6</span>
    </a>
  </div>
</nav>
<main class="main-content">
  <section class="tab-content" id="tab-1">
    <h2>TAB 1 CONTENT</h2>
    <p>Here's some content</p>
  </section>
  <section class="tab-content" id="tab-2">
    <h2>TAB 2 CONTENT</h2>
    <p>Here's some content</p>
  </section>
  <section class="tab-content" id="tab-3">
    <h2>TAB 3 CONTENT</h2>
    <p>Nothing to see here</p>
  </section>
  <section class="tab-content" id="tab-4">
    <h2>TAB 4 CONTENT</h2>
    <p>Here's some content</p>
  </section>
  <section class="tab-content" id="tab-5">
    <h2>TAB 5 CONTENT</h2>
    <p>Nothing to see here</p>
  </section>
  <section class="tab-content" id="tab-6">
    <h2>TAB 6 CONTENT</h2>
    <p>Nothing to see here</p>
  </section>
</main>
<footer class="footer-content">
  FOOTER
</footer>

script.js

// Trigger browser touch highlight styling control
document.addEventListener("touchstart", function(){}, true);

// Bring in the JQuery show/hide controls for tabs
$(document).ready(function() {
  // Tabbify if we have JS and select the first tab by default.
  $(".tab-content").hide();
  $(".tab-link:first-child").addClass("tab-link--current");
  $(".tab-content:first-child").show();
  $(".tabs").addClass('tabs--ready');

  $(".tab-link").click(function(event) {
    event.preventDefault();
    var tab_id = $(this).attr("data-tab");

    $(".tab-link").removeClass("tab-link--current");
    $(".tab-content").hide();

    $(this).addClass("tab-link--current");
    $("#" + tab_id).show();
  });
});

scripts

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

style.scss

body {
  margin: 0;
  font-family: sans-serif;
  background: #e3e3e3;
  text-align: center;
}
.masthead {
  padding: 1.5rem 0;
  background: #ccc;
}
.upper-content {
  padding: 2rem 0;
  
  img {
    width: 80%;
    max-width: 186px;
  }
}
.footer-content {
  padding: 1.5rem 0;
  background: #e3e3e3;
}
.h-scroller {
  width: 100%;
  
  // // Make this scrollable when needed
  overflow: hidden;
  overflow-x: scroll;
  
  // For WebKit implementations, provide inertia scrolling
  // However... this appears to prevent the following display: none rule from working!
  // -webkit-overflow-scrolling: touch;
  
  // Remove the default scrollbar for WebKit implementations
  &::-webkit-scrollbar {
     display: none;
  }
}
.tabs {
  display: flex;
  flex-wrap: nowrap;
  padding: .5rem 0;
  margin: 0 1rem;
}
@keyframes springload {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(-4rem);
  }
}
.tabs--ready {
  animation: springload .3s 1.5s 2 both alternate;
}
.tab-link {
  opacity: .3;
  white-space: nowrap;
  padding: 0.3rem 1.5rem;
  text-decoration: none;
  color: blue;
  transition: opacity .2s;
  border-radius: .8rem;
}
.tab-link--complete {
  opacity: 1;
}
.tab-link--current {
  background: blue;
  color: white;
  opacity: 1;
}

.tab-content {
  padding: 2rem;
  min-height: 20em;
  background: lightblue;
}
.tab-content--current {
  display: inherit;
}

tabbed-mobile-content-view-jquery.markdown

Tabbed mobile content view - jQuery

A Pen by Grant Bunyan on CodePen.

License.