Tabbed Content With Read More Content With CSS And Jquery

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.........

Reactions:

You Might Also Like:

Newest Post
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Newest Post