Collapsable/Toggle Links

index.html

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

scripts.js

$(document).ready(function(){
  
$('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();
	}
});

});

style.css

.collapse_content {
  display: none;
}
.active {
  background: #000;
}

you can prob get rid of [data-toggle] and use [data-target] as a selector instead