Tabbed Content With Read More Content With Css Only

Setelah kemarin kita menciptakan tabbed content with read more content with CSS and Jquery, sekarang kita akan membuatnya hanya dengan CSS saja (konsepnya dari sini) alasannya tidak semua blog memakai Jquery.

Sehingga tabbed content ini dapat dipakai pada blog yang tidak memakai Jquery atau juga blog dengan AMP HTML.

Tabbed content ini memanfaatkan input dan label untuk show hide content dan sudah aku buat responsive. Saya menciptakan 3 buah tab, jadi perlu kustomisasi kalau memerlukan tab lebih dari 3 buah.

Sebagai demonya silahkan coba pada amp-iframe di bawah ini.


Jika Anda ingin mencobanya, silahkan copy kode-kode di bawah ini.

Silahkan simpan instruksi CSS ini di atas instruksi </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 /*<![CDATA[*/
 .tabs {
   position: relative;
   clear: both;
   margin: 0;
   padding: 40px 0 0;
 }
 .tab label {
   height: 40px;
   line-height: 40px;
   padding: 0 10px;
   position: absolute;
   top: 0;
   cursor: pointer;
   border: 1px solid transparent;
   width: 100px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   text-align: center;
   font-weight: bold;
 }
 .tab label[for=tab-2] {
   left: 100px
 }
 .tab label[for=tab-3] {
   left: 200px
 }
 .tab [type=radio],
 .hideContent input[type="checkbox"] {
   display: none;
 }
 .content {
   position: relative;
   background: white;
   padding: 10px;
   border: 1px solid #ccc;
   display: none;
   margin-top: -1px;
 }
 .content p {
   margin: 0;
   padding: 0;
 }
 .tab [type=radio]:checked   label {
   background: white;
   border: 1px solid #ccc;
   border-bottom: 1px solid white;
   z-index: 2;
   border-radius: 4px 4px 0 0;
 }
 .tab [type=radio]:checked   label   .content {
   z-index: 1;
   display: block;
 }
 .hideContent {
   height: auto;
 }
 .hideContent input[type="checkbox"]   div {
   width: 100%;
   overflow: hidden;
   max-height: 144px;
   padding-bottom: 30px;
   position: relative;
 }
 .hideContent label {
   background: #fff;
   width: 100%;
   height: 30px;
   line-height: 30px;
   cursor: pointer;
   position: absolute;
   top: calc(100% - 30px);
   left: 0;
   right: 0;
   padding: 0;
   z-index: 2;
   border: none;
 }
 .hideContent label:before {
   position: absolute;
   content: 'Read More 🔽';
   width: 120px;
   text-align: center;
   left: 50%;
   margin-left: -60px;
   font-weight: bold;
 }
 .hideContent input[type="checkbox"]   div:after {
   content: "";
   width: 100%;
   height: 70px;
   position: absolute;
   bottom: 20px;
   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   z-index: 1;
 }
 .hideContent input[type="checkbox"]:checked   div {
   max-height: 3000px;
   transition: 2s;
 }
 .hideContent input[type="checkbox"]:checked   div:after {
   background: 0 0;
 }
 .hideContent input[type="checkbox"]:checked + label:before {
   content: 'Content Less 🔼';
 }
 .clear {
   display: block;
   clear: both;
 }
 @media screen and (max-width:414px) {
   .tab label {
     width: 100%;
     border-radius: 4px;
     background: #fff;
     margin: 0 0 5px;
     opacity: .7;
     border: 1px solid #ccc;
   }
   .tab label[for=tab-2] {
     left: 0;
     top: 45px;
   }
   .tabs {
     padding: 135px 0 0;
   }
   .tab label[for=tab-3] {
     left: 0;
     top: 90px;
   }
   .tab [type=radio]:checked   label {
     opacity: 1;
     border: 1px solid #ccc;
   }
   .hideContent label {
     border: none;
     opacity: 1;
   }
 }
 /*]]>*/
 </style>
 </b:if>

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

 <div class="tabs">
 
   <div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1">Tab One</label>
     <div class="content hideContent">
       <input type="checkbox" id="readmore-1">
       <label for="readmore-1"></label>
       <div>
         <p>Content for Tab One with readmore here</p>
       </div>
     </div>
   </div>
 
   <div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2">Tab Two</label>
     <div class="content hideContent">
       <input type="checkbox" id="readmore-2">
       <label for="readmore-2"></label>
       <div>
         <p>Content for Tab Two with readmore here</p>
       </div>
     </div>
   </div>
 
   <div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3">Tab Three</label>
     <div class="content">
       <p>Content for Tab Three with no readmore here</p>
     </div>
   </div>
 
   <div class="clear"></div>
 </div>

Untuk menghilangkan readmore, hapus hideContent pada <div class="content hideContent"> dan hapus input dan label yang ada di bawahnya.

Selamat mencoba....


Sumber https://www.kompiajaib.com/

Share this post