Simplest jQuery Accordian


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



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.