Multi Tab Sidebar Widget 01

<div class="container">
  <div class='multitab-section'>
    <ul class='multitab-widget multitab-widget-content-tabs-id'>
      <li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
      <li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
      <li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
    </ul>
    <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
      <span class='sidebar' id='sidebartab1' preferred='yes'>
        <p>Isi konten widget tab 1
          </br>
          </br>
          Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
          </br>
          Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
          </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
          </br>
          Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
      </span>
    </div>
    <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
      <span class='sidebar' id='sidebartab2' preferred='yes'>
        <p>Isi konten widget tab 2
          </br>
          </br>
          Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
          </br>
          Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
          </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
          </br>
          Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
      </span>
    </div>
    <div class='-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
      <span class='sidebar' id='sidebartab3' preferred='yes'>
        <p>Isi konten widget tab 3
          </br>
          </br>
          Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
          </br>
          Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
          </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
          </br>
          Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
      </span>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

body {
  background: #eaeaea none repeat scroll top left;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  max-width: 310px;
  margin: 12% auto;
  padding: 0;
  box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
  font-family: 'Open Sans', sans-serif;
}
/* Multi Tab Sidebar */

.multitab-section {
  display: inline-block;
  text-transform: uppercase;
  width: 100%;
}

.multitab-section p {
  display: inline-block;
  background: #fff;
  text-transform: lowercase;
  font-size: 14px;
  padding: 20px;
  margin: 0;
}

.multitab-widget {
  list-style: none;
  margin: 0 0 10px;
  padding: 0
}

.multitab-widget li {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left
}

.multitab-widget li a {
  background: #22a1c4;
  color: #fff;
  display: block;
  padding: 15px;
  font-size: 13px;
  text-decoration: none
}

.multitab-tab {
  width: 33.3%;
  text-align: center
}

.multitab-section h2,
.multitab-section h3,
.multitab-section h4,
.multitab-section h5,
.multitab-section h6 {
  display: none;
}

.multitab-widget li a.multitab-widget-current {
  padding-bottom: 20px;
  margin-top: -10px;
  background: #fff;
  color: #444;
  text-decoration: none;
  border-top: 5px solid #22a1c4;
  font-size: 14px;
  text-transform: capitalize
}

//<![CDATA[
jQuery(document).ready(function ($) {
 $(".multitab-widget-content-widget-id").hide();
 $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show();
 $(".multitab-widget-content-widget-id:first").show();
 $("ul.multitab-widget-content-tabs-id li a").click(function () {
  $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a");
  $(this).addClass("multitab-widget-current");
  $(".multitab-widget-content-widget-id").hide();
  var activeTab = $(this).attr("href");
  $(activeTab).fadeIn();
  return false;
 });
});
//]]>

source | codepen