jQuery showing or hiding effects

---

 In this article I explain some simple effects showing or hiding some elements on the page using jQuery.

In jQuery the two function show() and hide() simply work this.

Let's take example for show and hide div tag.
For that first takes two link for Show and Hide and div with some text.

<a href="#" id="btnShow">Show</a> 
<a href="#" id="btnHide">Hide</a>
<div>Hello Demo for showing & hiding div using jQuery.</div>

In jQuery put script for showing or hiding elements insode $(document).ready() function.

   <script src="http://code.jquery.com/jquery-latest.js" ></script>

   <script>
    $(document).ready(function(){
    
      $('#btnShow').click(function(){
      $('div').show("fast"); });

      $('#btnHide').click(function(){
      $("div").hide(1000); });
    });
   </script>

In above code simply show/hide <div> tag when btnShow click it show <div> tag and when btnHide click it hide <div> tag.

In above code you can see dollar sign"$" is nothing but a shorthand notation for find method in JQuery.

How to use Selector?

If you want to select any element in the page then you can use dollar sign "$" to get that element.

• Element Selector : for selecting all matching tag or elements use $('tagname') like  $('div').
• ID Selector : for selecting element with the given id attribute use $('#id') like $('#btnShow').so,(#) used for access the element with id.
• CSS selector: for find all element with a CSS class use $('.ClassName') select all element with ClassName CSS class..

In jQuery one more event toggle( ) which handle both events show() and hide().If they are shown, toggle makes them hidden (using the hide method). If they are hidden, toggle makes them shown (using the show method).

<a href="#" id="btnToggle">Toggle</a>

 $('#btnToggle').click(function () {
   $('div').toggle("slow"); });

In above all events show(speed),hide(speed),toggle(speed) use can specify speed for showing and hiding elements.Speed may be "slow","normal","fast" or the number of milliseconds to run the animation (e.g. 1000).