Wednesday, January 06, 2010

jQuery Hide/Close link

Phil Haack has written about how to close a “div” area using jQuery in his article here http://haacked.com/archive/2009/12/25/jquery-hide-close-link.aspx. However in his article he is demoing “slideUp()” function of jQuery which enables you to close the div. To show the same div again you will need to provide another link which will call “slideDown()”.

However there is another method “slideToggle()”. This method can toggle the visibility of div. If it is visible it will be hidden and if hidden it will be shown again. Following is demo of the functionality:

Welcome to ASP.NET!

To learn more about ASP.NET visit www.asp.net.

Following is the HTML markup for the same:

<div><a id="myLink" onclick="javascript:$('#myLink').html($('#myLink').html() == 'Show Info' ? 'Hide Info' : 'Show Info');$('#myDiv').slideToggle();" href="#">Hide Info</a></div>


<div id="myDiv">


  <h2>Welcome to ASP.NET! </h2>


  <p>To learn more about ASP.NET visit <a title="ASP.NET Website" href="http://www.asp.net">www.asp.net</a>. </p>


</div>


If you notice the onclick() of anchor tag, you will definitely frown on my inline javascript. But that is because I was not able to get Script tag working with Blogger and anyway I quickly wanted to show you slideToggle() functionality of jQuery.

No comments: