Подскажите, как сделать так, чтобы при клике по кнопке появлялся текст div'a, а изначально был показан текст первого div'a?
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="col-sm-3 col-md-6 col-lg-4">
<div class="list-group">
<a class="list-group-item">First item</a>
<a class="list-group-item">Second item</a>
<a class="list-group-item">Third item</a>
</div>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<div class="section">Some text</div>
<div class="section">And more text</div>
<div class="section">Lorem ipsum</div>
</div>
</div>
</div>
<!-- jQuery Core -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
CSS
.list-group-item {
margin: 10px;
position: relative;
display: block;
cursor: pointer;
}
.section {
display: none;
}
jQuery
$(".list-group-item").on("click", function(){
var idx = $(this).index();
$(".section").hide();
$(".section").eq(idx).toggle();
});