$(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');
})
})
<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>Wondershare Player for Android 3.0.5 - Wondershare Player is an all-in-one Video Player & Video Discovery to "Discover latest videos to watch online & offline", no need for other players or codecs.
<br/>
<br/> It is possible to watch free videos from famous third-party video websites such as YouTube, Vevo, Dailymotion, Metacafe and Vimeo in a single app. The powerful search feature also lets you find your favorite video clips or movies easily and quickly.
But what if you don't know what to view? Don't worry. Wondershare player is so smart that it's able to discover the hottest and newest movies, TV show and music videos for you, as well as telling you what the most popular movies are. You'll never
miss any blockbuster with it.
<br/>
<br/> Want to watch web videos later on Android phones or offline during your travels? We are here to help. With Wondershare Player- the "Instapper" for videos, you can now cache videos from third-party sites and add them to the "Watch Later Queue"
for offline watching. What's more, when you cache videos under Wi-Fi connections, you can watch it later at no extra costs.
<br/>
<br/> Any time, any place, any screen - with Wondershare Player in your pocket, you can easily switch between the screen size of your choice - phone, PC or TV. As a full-featured UPnP/DLNA control point, Wondershare Player enables you to enjoy favorite
videos and music anywhere you happen to be! Want to share it with friends and family? Just stream personal and online videos or music to a nearby large-screen TV. In addition to that, you can freely browse and play media files shared by your computer
on Android phones. There’s no need to sync, to upload onto cloud or to register to an online service... You're in absolute control!
<br/>
<br/> You don't need to find any transformer or download any codec to playback videos & audio files. Wondershare Player supports playback of video & audio, shared by a remote computer on Android mobile phones. The app also supports the seamless playback
of high-quality video streaming, presenting you with what is one of the most feature rich Android media players available today!
<br/>
<br/> Supported Formats:
<br/> Video: .avi, .mp4, .mkv, .rm/rmvb, .mov, .mpg, .vob, .flv, .wmv, .asf, .ts, .m2ts, .ogg, .3gp, .iso
<br/> Audio: .mp3, .wma, .ape, .aac, .flac
<br/> Network: http, rtsp, mms, rtmp, samba
<br/> Subtitle: .srt, .cdg, .idx, .sub, .utf, .ass, .ssa, .aqt, .jss, .psb, .rt, .smi, .txt
<br/>
</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">Processor:</span> <span class="field-value">ARM, MIPS or x86 CPU</span>
<span class="field-name">Free External Space:</span> <span class="field-value">8GB or more</span>
<span class="field-name">RAM:</span> <span class="field-value">256MB or above</span>
<span class="field-name">Languages:</span> <span class="field-value">Multi Language</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">
- Enhance the system stability;
<br/> - A few other issues fixed.
</div>
</div>
.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
}
}