Tabbed Content With Read More Content

by kompiajaib

HTML

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

CSS

.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%);
 ...

JavaScript

$(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');
  })
})