Return to Snippet

Revision: 40593
at February 4, 2011 03:50 by prit


Updated Code
<style>
.works p {  display: none; }
</style>

<ul class="works"> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 2</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 3</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 4</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
</ul> 

<!-- replace this with the latest jQuery version -->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script type="text/javascript"> 
$().ready(function() {   
	$('.work').click(function() {
		$('.works p').slideUp('fast');
		if ($(this).siblings('p').is(":hidden"))  $(this).siblings('p').slideDown();
		return false;
	});
});
</script>

Revision: 40592
at February 4, 2011 03:49 by prit


Initial Code
<style>
.works p {  display: none; }
</style>

<ul class="works"> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
	<li> 
		<a class="work" href="javascript:void(0)">Main Level 1</a>
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	</li> 
</ul> 

<!-- replace this with the latest jQuery version -->
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script type="text/javascript"> 
$().ready(function() {   
	$('.work').click(function() {
		$('.works p').slideUp('fast');
		if ($(this).siblings('p').is(":hidden"))  $(this).siblings('p').slideDown();
		return false;
	});
});
</script>

Initial URL

                                

Initial Description

                                

Initial Title
Simplest jQuery Accordian

Initial Tags
jquery

Initial Language
JavaScript