,

How to create Tabbed Content With Read More Content With CSS And Jquery


Sometimes we want to make the posting page become more simple in displaying the content. For that we can use tabbed content so that our content for some tabs. 

Usually tabbed content is widely used by blogs and websites that present software content, but of course can be used by other types of blogs and web. 

Well this time we will additionally create tabbed content with CSS and JQuery, I will also add read more content with the background gradient at the bottom by using CSS3. 

 For demonstration see demo on bottom this article .

 How, interested to try it? Please copy the code below. 

Please save the CSS code below above </head> code 

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

Then please save the Jquery code below above </body> code 

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

Then please use the HTML code below to display the tabbed content in the post. 

<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 (HK) Co., Ltd.</a></span> 
</span> 
</div> 

<div id="tab-3" class="tab-content"> 
<p> 
CONTENT HERE FOR tab-3 (Change Log) 
</p> 
</div> 

</div> 

Good luck.........

DEMO: