Tabbed Content With Read More Content With CSS And Jquery

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/21/2017

Kadang kita ingin membuat halaman postingan menjadi lebih simple dalam menampilkan konten. Untuk itu kita bisa menggunakan tabbed content sehingga konten kita bagi menjadi beberapa tab.

Biasanya tabbed content banyak digunakan oleh blog dan website yang menyajikan konten software, namun tentunya bisa digunakan oleh jenis blog dan web lainnya.

Nah kali ini kita selain akan membuat tabbed content dengan CSS dan JQuery, saya juga akan menambahkan read more content dengan gradien background di bagian bawahnya dengan menggunakan CSS3.

Untuk lebih jelas silahkan coba pada amp-iframe di bawah ini.


Bagaimana, tertarik untuk mencobanya? Silahkan copy kode-kode di bawah ini.

Silahkan simpan kode CSS di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/*<![CDATA[*/

.container-content {

  width: 100%;

  margin: 0 auto 10px

}

ul.tabs {

  margin: 0 0 -1px;

  padding: 0;

  list-style: none

}

ul.tabs li {

  background: 0 0;

  display: inline-block;

  margin: 0;

  padding: 10px 15px;

  cursor: pointer;

  font-weight: 700;

  border-radius: 4px 4px 0 0;

}

.tab-content,

ul.tabs li.current {

  background: #7e8b96;

  color: #fff

}

.tab-content {

  display: none;

  padding: 15px

}

.tab-content.current {

  display: inherit

}

.container-content .tab-content p,

.container-content .tab-content ul,

.container-content .tab-content ol {

  margin: 0

}

.container-content .tab-content ul li,

.container-content .tab-content ol li {

  margin: 0 0 0 20px;

  padding: 0

}

.tab-content a {

  color: #9fe3ff

}

.technical-box {

  display: block;

  line-height: 1.3

}

.technical-box:after {

  content: "";

  clear: both;

  display: block

}

.technical-box .field-name {

  display: inline-block;

  font-weight: 700;

  width: 180px;

  margin: 0;

  position: relative;

  top: 0;

  float: left

}

.technical-box .field-value {

  display: inline-block;

  margin: 0;

  width: calc(100% - 180px);

  float: left

}

.tab-content input[type="checkbox"] {

  position: absolute;

  left: -9999px;

}

.hideContent {

  position: relative;

  height: auto;

}

label {

  background: #7e8b96;

  display: block;

  height: 30px;

  line-height: 30px;

  cursor: pointer;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 2;

}

label:before {

  position: absolute;

  content: 'Read More 🔽';

  width: 120px;

  text-align: center;

  left: 50%;

  margin-left: -60px;

  font-weight: bold;

}

.tab-content input[type="checkbox"] ~ div {

  width: 100%;

  overflow: hidden;

  max-height: 144px;

  padding-bottom: 30px;

  position: relative;

}

.tab-content input[type="checkbox"] ~ div:after {

  content: "";

  width: 100%;

  height: 70px;

  position: absolute;

  bottom: 15px;

  background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);

  background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);

  background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);

  z-index: 1;

}

.tab-content input[type="checkbox"]:checked ~ div {

  max-height: 3000px;

  transition: 2s;

}

.tab-content input[type="checkbox"]:checked ~ div:after {

  background: 0 0;

}

.tab-content input[type="checkbox"]:checked + label:before {

  content: 'Content Less 🔼';

}

@media screen and (max-width:414px) {

  ul.tabs li {

    width: 100%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 4px;

    background: #7e8b96;

    margin: 0 0 5px;

    color: #fff;

    opacity: .7;

  }

  ul.tabs li.current {

    opacity: 1

  }

}

/*]]>*/

</style>

</b:if>

Kemudian silahkan simpan kode Jquery di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script>

//<![CDATA[

$(document).ready(function() {

  $('ul.tabs li').click(function() {

    var tab_id = $(this).attr('data-tab');



    $('ul.tabs li').removeClass('current');

    $('.tab-content').removeClass('current');



    $(this).addClass('current');

    $("#" + tab_id).addClass('current');

  })

})

//]]>

</script>

</b:if>

Kemudian silahkan gunakan kode HTML di bawah ini untuk menampilkan tabbed content di dalam postingan.

<div class="container-content">



  <ul class="tabs">

    <li class="tab-link current" data-tab="tab-1">Description</li>

    <li class="tab-link" data-tab="tab-2">Technical</li>

    <li class="tab-link" data-tab="tab-3">Change Log</li>

  </ul>



  <div id="tab-1" class="tab-content current hideContent">

    <input type="checkbox" id="check_id">

    <label for="check_id"></label>

    <div>

      <p>

CONTENT FOR tab-1 (Description) HERE

      </p>

    </div>

  </div>



  <div id="tab-2" class="tab-content">

    <span class="technical-box">

<span class="field-name">Title:</span> <span class="field-value">Wondershare Player for Android 3.0.5</span>

    <span class="field-name">Filename:</span> <span class="field-value">wsplayer.apk</span>

    <span class="field-name">File size:</span> <span class="field-value">16.9 MB</span>

    <span class="field-name">Supported OS:</span> <span class="field-value">Android 2.2 or above</span>

    <span class="field-name">License:</span> <span class="field-value">Freeware</span>

    <span class="field-name">Author:</span> <span class="field-value"><a href="https://www.wondershare.com/" rel="nofollow" target="_blank" class="external-link">Wondershare Software (H.K.) Co., Ltd.</a></span>

    </span>

  </div>



  <div id="tab-3" class="tab-content">

      <p>

CONTENT HERE FOR tab-3 (Change Log)

      </p>

  </div>



</div>

Selamat mencoba.........