SlideToggle

Simple click and slide toggle options

by ChrisStanyon

HTML

<a class="ahref" data-div=".box1"></a>
<a class="ahref" data-div=".box2"></a>
<a class="ahref" data-div=".box3"></a>

<div class="box1">1</div> 
<div class="box2">2</div> 
<div class="box3">3</div>

CSS

.ahref { background-color: green; width: 20px; height: 20px; display:inline-block; }
.hidden { background-color: red; }

JavaScript

$('.ahref').click(function(e) {
	myLink = $(this); //which link was clicked
	myLink.toggleClass('hidden'); //change the status of the link
	$(myLink.data('div')).slideToggle(500); //slide the DIV
});