tab list

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-15 col-box">
                        

                        <div class="tab-section tab-promo">
                          <div class="nav-tabs ">
                            <div class="list">
                              <div data-target="#tab1" class="tabAction active" status="tab-menu">
                                <span>Tentang Promo</span>
                              </div>
                            </div>
                            <div class="list">
                              <div data-target="#tab2" class="tabAction " status="tab-menu">
                                <span>Syarat &amp; Ketentuan</span>
                              </div>
                            </div>
                          </div>
                          <div class="tab-content">
                            <div id="tab1" class="tab-pane active in"> 
                              Penuhi kebutuhanmu di Orami dan dapatkan cashbacknya! Gunakan kode voucher <strong>CASHB250AGS</strong> di pembelian pertamamu dan dapatkan cashback sebesar <strong>Rp 250,000</strong> untuk pembelianmu di bulan September.
                            </div>

                            <div id="tab2" class="tab-pane">
                              <h3><strong>SYARAT &amp; KETENTUAN</strong></h3>

                              <br>
                              <ol>
                                <li>Voucher yang Anda terima merupakan voucher potongan 10%.</li>
                                <li>Maksimum diskon Rp 1,500,000.</li>
                                <li>Berlaku untuk all customer.</li>
                                <li>Tidak berlaku untuk gift voucher dan susu di bawah satu tahun.</li>
                                <li> Tidak berlaku untuk brand berikut ini. Klik (mohon diarahkan ke page https://www.orami.co.id/nonbrand-sale)</li>
       ...

CSS

.transparent {
  background-color: transparent; }

.nav-tabs {
  display: table; }
  .nav-tabs .list {
    padding: 0; }
    .nav-tabs .list .tabAction.active {
      color: #73777a; }

.col-box a {
  display: inline; }

.tab-view {
  display: table;
  width: 100%; }
  .tab-view .tab-cell {
    display: table-cell;
    float: none;
    vertical-align: top;
    background-color: transparent; }

.tab-content {
  padding: 0; }
  .tab-content .tab-pane {
    opacity: 0;
    display: none; }
    .tab-content .tab-pane.active {
      display: block; }
    .tab-content .tab-pane.active.in {
      opacity: 1; }

.tab-promo .nav-tabs {
  width: 100%;
  border-bottom: solid 1px #e0e0e0; }
  .tab-promo .nav-tabs .list {
    width: 50%;
    display: table-cell;
    text-align: center;
    vertical-align: bottom; }
    .tab-promo .nav-tabs .list .tabAction {
      cursor: pointer;
      padding: 15px 5px 20px;
      font-size: 20px;
      line-height: 24px;
      display: inline-block;
      font-family: open_sansbold;
      color: #73777a;
      position: relative; }
      @media (max-width: 420px) {
        .tab-promo .nav-tabs .list .tabAction {
          min-height: 65px; } }
      @media (max-width: 768px) {
        .tab-promo .nav-tabs .list .tabAction {
          font-size: 14px;
          line-height: 18px; } }
      .tab-promo .nav-tabs .list .tabAction.active {
        color: #3c3d41; }
        .tab-promo .nav-tabs .list .tabAction.active:after {
          content: "";
          bottom: 0;
          left: 0;
          right: 0;
          height: 10px;
          background-color: #fc9797;
          position: absolute; }
.tab-promo .tab-content {
  font-size: 16px;
  line-height: 20px;
  padding: 30px; }
  @media (max-width: 768px) {
    .tab-promo .tab-content {
      font-size: 14px;
      line-height: 18px; } }
  .tab-promo .tab-content li {
    font-size: 16px;
    line-height: 20px; }

JavaScript

$(document).ready(function(){

$('.tabAction[status=tab-menu]').click(function(){
      var getTabName = $(this).data('target');
      $(getTabName).closest('.tab-content').find('.tab-pane').removeClass('active in');
      $(this).closest('.nav-tabs').find('.tabAction').removeClass('active');
      $(this).addClass('active');
      $(getTabName).addClass('active in');
  });

});