/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
The Code <script type="text/javascript"> //<![CDATA[ // START ready function $(document).ready(function(){ // TOGGLE SCRIPT $(".hide").hide(); $("a.toggle").click(function(event){ if ('[-]' == $(this).text( )) { $(this).text('[+]'); } else { $(this).text('[-]'); } $(this).parents(".article").find(".hide").toggle("normal"); // Stop the link click from doing its normal thing return false; }); // END TOGGLE }); // END ready function //]]> </script> This markup: <div class="article"> <a class="toggle" href="#">Toggle 1 »</a> <div class="hide"> <p>Hidden toggle content 1.</p> </div> </div> <div class="article"> <a class="toggle" href="#">Toggle 2 »</a> <div class="hide"> <p>Hidden toggle content 2.</p> </div> </div> <div class="article"> <a class="toggle" href="#">Toggle 3 »</a> <div class="hide"> <p>Hidden toggle content 3.</p> </div> </div>
URL: http://jendrodesign.com/blog/2009/07/reusable-jquery-toggle/