Aknosis.com

Fun with jQuery – toggle() – Easy tips to visually enhance your website

Here’s a quick tip to add some cool effects with jQuery that require very little code to implement. In this example I’m going to so how use of the toggle function can make the simplest functionality and jazz it up.

.toggle()

In a nutshell, the toggle function will call the show() function if your element isn’t visible and the hide() function if it is.

• Hamburger
• Philly Cheese Steak
• Taco
• Pizza
• Something else greasy and unhealthy

<br />
&lt;input onclick=&quot;$(&#8216;#preview1&#8242;).toggle();&quot; type=&quot;button&quot; value=&quot;Toggle My Menu&quot; /&gt;<br />

So as expected, clicking the button will toggle the menu. Now lets get a little more flashy:

• Hamburger
• Philly Cheese Steak
• Taco
• Pizza
• Something else greasy and unhealthy

<br />
&lt;input onclick=&quot;$(&#8216;#preview2&#8242;).toggle(&#8217;slow&#8217;);&quot; type=&quot;button&quot; value=&quot;Toggle My Menu&quot; /&gt;<br />

Now you have a ’sliding’ type effect for showing and hiding contents all with about 40 extra characters of text.
Want to be a bit more ‘dynamic’?

• Hamburger
• Philly Cheese Steak
• Taco
• Pizza
• Something else greasy and unhealthy

<br />
&lt;input class=&quot;button&quot; id=&quot;menuToggler&quot; onclick=&quot;$(&#8216;#preview3&#8242;).toggle(&#8217;slow&#8217;,function(){if($(this).is(&#8216;:visible&#8217;)){$(&#8216;#menuToggler&#8217;).val(&#8216;Hide My Menu&#8217;);}else{$(&#8216;#menuToggler&#8217;).val(&#8216;Show My Menu&#8217;);}});&quot; type=&quot;button&quot; value=&quot;Hide My Menu&quot; /&gt;<br />

Here is better formatted javascript:

<br />
$(&#8216;#preview3&#8242;).toggle(&#8217;slow&#8217;,<br />
	function(){<br />
		if($(this).is(&#8216;:visible&#8217;)){<br />
			$(&#8216;#menuToggler&#8217;).val(&#8216;Hide My Menu&#8217;);<br />
		}else{<br />
			$(&#8216;#menuToggler&#8217;).val(&#8216;Show My Menu&#8217;);<br />
		}<br />
	}<br />
);<br />

What happens here is I have now created a function that is called once the toggle animation is done, it checks to see if the menu is visible and changes the buttons value based on that check.

As I said before, toggle just does the math and executes a hide or show on the element. Here is an example of the same thing using hide and show seperately.

• Hamburger
• Philly Cheese Steak
• Taco
• Pizza
• Something else greasy and unhealthy

<br />
&lt;input class=&quot;button&quot; onclick=&quot;$(&#8216;#preview4&#8242;).hide(&#8217;slow&#8217;);&quot; type=&quot;button&quot; value=&quot;Hide My Menu&quot; /&gt;<br />
&lt;input class=&quot;button&quot; onclick=&quot;$(&#8216;#preview4&#8242;).show(&#8217;slow&#8217;);&quot; type=&quot;button&quot; value=&quot;Show My Menu&quot; /&gt;<br />

Stay tuned for more fun with jQuery, my favorite JavaScript library. http://jquery.com/

Tags: JavaScript, jquery