/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<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>