Ditulis oleh: Ditulis pada: 4/25/2017
Setelah kemarin kita membuat tabbed content with read more content with CSS and Jquery, kini kita akan membuatnya hanya dengan CSS saja (konsepnya dari sini) karena tidak semua blog menggunakan Jquery.Sehingga tabbed content ini bisa digunakan pada blog yang tidak menggunakan Jquery atau juga blog dengan AMP HTML.
Tabbed content ini memanfaatkan input dan label untuk show hide content dan sudah saya buat responsive. Saya membuat 3 buah tab, jadi perlu kustomisasi jika 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 kode CSS ini di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<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 kode 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....