Film51 Tabs

by Kevin Pliester

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"></script>
<div class="row">

  <div id="c-tab-navigation" class="col-4">
    <h3>Unser Netzwerk:</h3>
    <a href="javascript:void(0);" data-href="#c-tab-1">MARCEL WILKE</a>
    <a href="javascript:void(0);" data-href="#c-tab-2">KENAN MURTEZOSKI</a>
    <a href="javascript:void(0);" data-href="#c-tab-3">LEA SOPHIE KNOFF</a>
    <a href="javascript:void(0);" data-href="#c-tab-4">LAURA DILLSCHNEIDER</a>
    <a href="javascript:void(0);" data-href="#c-tab-5">JACQUELINE KUHN</a>
    <a href="javascript:void(0);" data-href="#c-tab-6">MARCEL WITTKO</a>
    <a href="javascript:void(0);" data-href="#c-tab-7">DANIELLE GUILLAUME</a>
    <a href="javascript:void(0);" data-href="#c-tab-8">MARCEL JUNGMANN</a>
    <a href="javascript:void(0);" data-href="#c-tab-9">ALEKS BELLINGHAUSEN</a>
    <a href="javascript:void(0);" data-href="#c-tab-10">FREDERIK KIEFER</a>
    <a href="javascript:void(0);" data-href="#c-tab-11">STEFAN TURIAK</a>
  </div>

  <select id="c-tab-dropdown" class="col-4">
    <option value="#c-tab-1" selected="selected">MARCEL WILKE</option>
    <option value="#c-tab-2">KENAN MURTEZOSKI</option>
    <option value="#c-tab-3">LEA SOPHIE KNOFF</option>
    <option value="#c-tab-4">LAURA DILLSCHNEIDER</option>
    <option value="#c-tab-5">JACQUELINE KUHN</option>
    <option value="#c-tab-6">MARCEL WITTKO</option>
    <option value="#c-tab-7">DANIELLE GUILLAUME</option>
    <option value="#c-tab-8">MARCEL JUNGMANN</option>
    <option value="#c-tab-9">ALEKS BELLINGHAUSEN</option>
    <option value="#c-tab-10">FREDERIK KIEFER</option>
    <option value="#c-tab-11">STEFAN TURIAK</option>
  </select>

  <div id="c-tab-content-wrapper" class="col-8">

    <div id="c-tab-1" class="active">
      <div class="row">
        <div class="col-6 c-tab-image">
          <img src="http://dev.film51.de/wp-content/uploads/2017/02/mwschlank.png" alt="Marcel Wilke">
        </div>
        <div class="col-6...

CSS

* {
  box-sizing: border-box;
  color: rgb(94, 94, 94);
  font-family: 'Roboto', sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}


/**** START TABS ****/

#c-tab-navigation h3 {
  font-size: 80%;
  text-transform: uppercase;
}

#c-tab-navigation a {
  display: block;
  margin: 0 0 5px;
}

#c-tab-content-wrapper > div {
  display: none;
}

#c-tab-content-wrapper hr {
  display: inline-block;
  width: 25px;
  background: rgb(94, 94, 94);
  border-color: rgb(94, 94, 94);
}

.active {
  display: block !important;
}

.c-tab-description > .c-tab-name {
  text-transform: uppercase;
  margin: 0 0 10px;
  padding: 0;
}

.c-tab-description > .c-tab-position {
  text-transform: uppercase;
  margin: 0 0 20px;
  padding: 0;
}

#c-tab-dropdown {
  display: none;
}


/**** START GRID ****/

.row::after {
  content: "";
  clear: both;
  display: table;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

@media screen and (max-width: 900px) {
  [class*="col-"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }
  #c-tab-navigation {
    display: none !important;
  }
  #c-tab-dropdown {
    display: block !important;
  }
}

JavaScript

jQuery(document).ready(function($) {
  $('#c-tab-navigation a').each(function(i, obj) {
    var target = $(obj).data('href');
    $(obj).on('click', function() {
      $('#c-tab-content-wrapper > div').removeClass('active');
      $(target).addClass('active');
    });
  });
  $('#c-tab-dropdown').on('change', function() {
    var target = $(this).val();
    $('#c-tab-content-wrapper > div').removeClass('active');
    $(target).addClass('active');
  });
});