Fancy and Animated Hide and Show of Paragraph Tag Using jQuery

Preface

This article shows how to create a Fancy and Animated Hide and Show of a Paragraph Tag in ASP.NET using jQuery. Please assume this article as an addition to my last article titled "Animated Hide and Show of Paragraph Tag Using jQuery". If you review my last article, you will notice that I have used two different <a> tags that are <a href="#" class="show"> and <a href="#" class="hide">, and by using the jQuery .hide() and .show() methods I switched both one by one. But it is not the right way, if jQuery has compound effects. If we use Compound Effects, only a single <a> tag will do all this and the rest of the code will even become short and quick.

Setup Demonstration Page

Let's setup the demonstration page; find the code below:

Setup jQuery Methods

Let's setup the jQuery methods; find the code below:

This toggling can be achieved by first checking the visibility of the matched elements and then calling the appropriate method. Using an if/else statement is a perfectly reasonable way to toggle an element's visibility. However, with jQuery's compound effects we can remove some conditional logic from our code. jQuery provides a .toggle() method, which acts like .show() and .hide(), and like them, can be used with a speed argument or without. The code will be something like:

$P1.slideToggle('slow');

Here is the new code snippets that uses the .toggle() method:

Find my running screen below.

I hope you like it.