Advanced Search

Return to Snippet

Revision: 19953
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
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