Tabbed content com jquery e Css and read more

Tabbed content com jquery e Css and read more

Tabbed content com jquery e Css and read more  foi criado por Mohit Aneja Isso tem um efeito legal ao clicar as abas bem como possui read more o que pode deixar mais interresante basta criatividade para instalar no lugar certo do template se deseja instalar só seguir o passos abaixo


Como instalar o widget no Blogger

Faça login no blogger então va no menu tema editar Html com as teclas combinadas CTRL+F busque por </head>  logo acima disso copie e cole o seguinte código:

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

Então vamos instalar o Jquery acima de </body> 

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

Código 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>
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 (H.K.) Co., Ltd.</a></span>
    </span>
  </div>

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

</div>


Salve e veja o resultado 



Click to comment