How to make tabs with vertical scrolling?

how to make to increasing the number of the text inside the masonry it is not stretched and there was scrolling.
overflow-hidden stupid clips
tell me Posa
<ul class="accordion-tabs">
 <li class="tab-head-cont">
 <a href="#" class="is-active">Tab</a>
<section>
<p>Lorem</p>
</section>
</li>
 <li class="tab-head-cont">
 <a href="#">Second tab</a>
<section>
 <p>Lorem ipsum</p>
</section>
</li>
 <li class="tab-head-cont">
 <a href="#">Third</a>
<section>
 <p>Lorem ipsum dolor</p> 
</section>
</li>
 <li class="tab-head-cont">
 <a href="#">Latest</a>
<section>
<p>.........</p>
</section>
</li>
</ul>


/* TABS */
.accordion-tabs {
 *zoom: 1;
 width: 100%;
 border: 1px solid #dddddd;
 border-radius: 0.1875 em;
 margin-bottom: 1.5 em;
margin-left:0;
padding-left:0;
}
.accordion-tabs:before,
 .accordion-tabs:after {
 content: "";
 display: table;
}
 .accordion-tabs:after {
 clear: both;
}
 .accordion-tabs li{
list-style:none;
}
 .accordion-tabs li.tab-head-cont:first-child a {
 border-top-left-radius: 0.1875 em;
 border-top-right-radius: 0.1875 em;
 border-top: 0;
}
 .accordion-tabs li.tab-head-cont:last-child a {
 border-bottom-left-radius: 0.1875 em;
 border-bottom-right-radius: 0.1875 em;
}
 .accordion-tabs li.tab-head-cont a {
text-decoration:none;
 border-top: 1px solid #dddddd;
 color: #888888;
 display: block;
 padding: 0.75 em 0.809 em;
}
 .accordion-tabs li.tab-head-cont a:hover {
 color: #000000;
}
 .accordion-tabs li.tab-head-cont a:focus {
 outline: none;
}
 .accordion-tabs li.tab-head-cont a.is-active {
 background-color: #f7f7f7;
 border-bottom: 0;
color:#333333;
}
 .accordion-tabs li.tab-head-cont section {
 padding: 1.5 em 1.618 em;
 background: #f7f7f7;
 display: none;
 overflow: hidden;
 width: 100%;
}

/* RESPONSIVE */
@media screen and (min-width: 40em) {
 .accordion-tabs {
 border: none;
 position: relative;
}
 .accordion-tabs li.tab-head-cont {
 display: inline;
}
 .accordion-tabs li.tab-head-cont:last-child a {
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}
 .accordion-tabs li.tab-head-cont a {
 display: inline-block;
 vertical-align: baseline;
 zoom: 1;
 *display: inline;
 *vertical-align: auto;
 border-top: 0;
 border-top-right-radius: 0.1875 em;
 border-top-left-radius: 0.1875 em;
}
 .accordion-tabs li.tab-head-cont a.is-active {
 background-color: #f7f7f7;
 border: 1px solid #dddddd;
 border-bottom: 1px solid #f7f7f7;
 margin-bottom: -1px;
}
 .accordion-tabs li.tab-head-cont section {
 border-bottom-left-radius: 0.1875 em;
 border-bottom-right-radius: 0.1875 em;
 border: 1px solid #dddddd;
 float: left;
 left: 0;
 padding: 0.75 em 0.809 em;
}
 .accordion-tabs li.tab-head-cont section p {
 -webkit-columns: 2;
 -moz-columns: 2;
 columns: 2;
}
}


$(document).ready(function () {
$('.accordion-tabs').children('li').first().children('a').addClass('is-active')
.next().addClass('is-open').show();
 $('.accordion-tabs').on('click', 'li > a', function(event) {
 if (!$(this).hasClass('is-active')) {
event.preventDefault();
 $('.accordion-tabs .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('.accordion-tabs').find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
 } else {
event.preventDefault();
}
});
 });
April 4th 20 at 00:56
0 answer

Find more questions by tags CSSjQuery