Show and Hide the Elements using javscript function

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

JavaScript dynamically

Step1:

Script:

function myfunction(divid,id,up,down)
 {       
    if ( $('#' + id).css('display') == 'block')
   
     {
          $('#' + id).css('display', 'none');
         
         $('#' + divid).removeClass(up);
         
 $('#' + divid).addClass(down);
           
           
     }

  else
             {
                  $('#' + id).css('display', 'block');
                   $('#' + divid).addClass(up);
         
 $('#' + divid).removeClass(down);
           
       
              
            }
           
return false;

}

Step2:

Style:

.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;
   
   
}

Step3: 

HTML Code :

<div class="up" id="divid"  onClick="myfunction('divid','tab1','up','down')"></div>
 <div id="tab1">
            <input name="" type="text">
</div>


 Step4:

Screenshot:

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


Enjoy Folks