Tabbed Content With Read More Content With Css And Jquery

Kadang kita ingin menciptakan halaman postingan menjadi lebih simple dalam menampilkan konten. Untuk itu kita dapat memakai tabbed content sehingga konten kita bagi menjadi beberapa tab.

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

Nah kali ini kita selain akan menciptakan tabbed content dengan CSS dan JQuery, aku juga akan menambahkan read more content dengan gradien background di bab bawahnya dengan memakai CSS3.

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


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

Silahkan simpan arahan CSS di bawah ini di atas arahan </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 arahan Jquery di bawah ini di atas arahan </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 arahan 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.........
Sumber https://www.kompiajaib.com/

Share this post