Advanced Search

Simplest jQuery Accordian

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .works p {  display: none; }
  3. </style>
  4.  
  5. <ul class="works"> 
  6. 	<li> 
  7. 		<a class="work" href="javascript:void(0)">Main Level 1</a>
  8. 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  9. 	</li> 
  10. 	<li> 
  11. 		<a class="work" href="javascript:void(0)">Main Level 2</a>
  12. 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  13. 	</li> 
  14. 	<li> 
  15. 		<a class="work" href="javascript:void(0)">Main Level 3</a>
  16. 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  17. 	</li> 
  18. 	<li> 
  19. 		<a class="work" href="javascript:void(0)">Main Level 4</a>
  20. 		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  21. 	</li> 
  22. </ul> 
  23.  
  24. <!-- replace this with the latest jQuery version -->
  25. <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  26.  
  27. <script type="text/javascript"> 
  28. $().ready(function() {   
  29. 	$('.work').click(function() {
  30. 		$('.works p').slideUp('fast');
  31. 		if ($(this).siblings('p').is(":hidden"))  $(this).siblings('p').slideDown();
  32. 		return false;
  33. 	});
  34. });
  35. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.