Revision: 19953
Updated Code
at November 4, 2009 02:19 by shabbar
Updated Code
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>
Revision: 19952
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2009 02:08 by shabbar
Initial Code
The Code <script type="text/javascript"> //<![CDATA[ // START ready function $(document).ready(function(){ // TOGGLE SCRIPT $(".hide").hide(); $("a.toggle").click(function(event){ $(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>
Initial URL
http://jendrodesign.com/blog/2009/07/reusable-jquery-toggle/
Initial Description
Initial Title
Reusable Jquery Toggle
Initial Tags
Initial Language
JavaScript