Collapsable/Toggle Links
.collapse_content {
display: none;
}
.active {
background: #000;
}
$('a[data-toggle]').on("click", function(e) {
e.preventDefault();
var target = $(this).attr("data-target");
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$('.collapse_content > div'+target).hide();
}
else {
$(this).closest('ul.collapse_list').find('a[data-toggle]').removeClass('active');
$(this).addClass('active');
$('.collapse_content > div').hide();
$('.collapse_content > div'+target).show();
}
});
<ul class="collapse_list">
<li><a href="#" data-toggle="collapse" data-target="#one">One</a></li>
<li><a href="#" data-toggle="collapse" data-target="#two">Two</a></li>
</ul>
<div class="collapse_content">
<div id="one">
<p>Content for div one</p>
</div>
<div id="two">
<p>Content for div two</p>
</div>
</div><!-- end .collapse_content -->