JQuery - Animate like Slide Down and Slide Up

How to Animate the Slide Down and Slide Up using JQuery ?

         Here "this" refers to current object which fires the event , $ indicates the JQuery. Here Single Button acts for both hide and slide up the div . How this can be done. In simple steps it can be do. Change the binding of method to the OnClick of button using "attr" Method. Id are specify by # and class name are specify by ".". Slide Up Method in JQuery is used to Slide Up in the given element. Slide Down in JQuery is used to Slide Down in the Given element.

Input HTML :

<input type="button" value="click" onclick="hide(this)" id="btn" >    

    <div id="panel">

        <p>Rajesh says , "Hi" </p>                

    </div>

JavaScript :

<script>

 function hide(obj){

        $("#panel").slideUp();

        $("#btn").attr("onclick", "show()");

  }

    function show() {

        $("#panel").slideDown();

        $("#btn").attr("onclick", "hide()");

  }

</script>

Click Here to View Full Source Code

Click Here to see the Result

Now From this sample we can learn some basics Animate using JQuery.