Подскажите, как сделать так, чтобы кликая по li с индексом 1 показывался div.section с индексом 1,а все остальные div.section с другими индексами были скрыты, тоже самое нужно и для других li
$(".section").hide();
$(".section").eq(0).show();
$(document).on("click", ".active_element", function() {
var idx = $(this).index();
$(".section").eq(idx).toggle();
})
.active_element {
position: relative;
}
.active_element:after {
display: block;
position: absolute;
top: 44px;
width: 114px;
content: '';
border-bottom: 8px solid #fdd901;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="row">
<ul class="h_scroll">
<li class="active_element">об услуге</li>
<li class="active_element">цены</li>
<li class="active_element">преимущества</li>
</ul>
</div>
<div class="row">
<div id="container">
<div class="h_scroll_content">
<div class="section">
<p class="txt">
text
</p>
</div>
<div class="section">
<p class="txt">
text 2
</p>
</div>
<div class="section">
text 3
</div>
</div>
</div>
</div>
</div>
tab.js
: getbootstrap.com/javascript/#tabs