toggle() method

Welcome to Designers Dairy blog here i have posted how to show and hide the selected Elements in

toggle() Method

Step 1:

Script


<script type="text/javascript">

$(function()
{
 $("#arrow").click(function()
 {
    $("#tab1").toggle();

if ($("#arrow").hasClass("up"))
{
    $("#arrow").removeClass("up");
    $("#arrow").addClass("down");
}
else
{
    $("#arrow").removeClass("down");
    $("#arrow").addClass("up");
}

});
});
</script>

Step 2:

Style:

<style type="text/css">
.up
{
    background:url(up_arrow.png) no-repeat 0 0;
    height:16px;
    width:16px;
   
   
   
}
.down
{
    background:url(down_arrow.png) no-repeat 0 0;
    height:16px;
    width:16px;
   
   
}

</style>


Step 3:

Html Code:

<div id="arrow" class="up"></div>
 <div id="tab1">
            <input name="" type="text">
          </div>


Step 4:

Screenshot:

 Step5:

 Click on the Arrow button it will hide the select element and change the arrow up and down


Enjoy Folks