Advanced Search

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