Friday, July 2, 2010

jQuery alternating show and hide

Recently I was working on an iPhone WAP and required to alternate the jQuery show and hide.

This is a How-To to do such an event.

1. Create a HTML A-Href tag and specify the class value of it. For the purposes of this example, I shall call it 'hrefTest'.

Eg:
<a href="#" class="hrefTest">Some test link</a>


2. Create the hidden field. For the purpose of this example, I am going to create a HTML P tag and assign the class value of this P tag to 'test' and also specify in the style value of the P tag of display: none.

Eg:
<p class="test" style="display: none">Some test value</p>


3. Ensure that you have the jQuery library file (jQuery-1.4.2.min.js) or similar has been referenced at the top of the page.
This is something that I often forget to do

4. Declare another script tag and include the jQuery document.ready function.

5. Within the jQuery document.ready function, insert the following

$(".hrefTest").click(function(){
if($(".test").css("display") == "none")
{
$(".test").show();
}
else
{
$(".test").hide();
}
});


And walah, you have yourself a HTML link that will alternate between showing and hiding some text or whatever data.

No comments:

Post a Comment