Hide and show multiple html elements using javascript

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

JavaScript dynamically

Step1:

Script:

<script type="text/javascript">
function myfunction(divid,actionid,up,down)
{
     if ($('#' + actionid).hasClass("display_hide"))
     { 
             $('#'+ divid).removeClass('up').addClass('down');           
            $('#'+actionid).removeClass('display_hide').addClass('display_show');
     }

  else
     {
         $('#'+ divid).removeClass('down').addClass('up');
         $('#'+actionid).removeClass('display_show').addClass('display_hide');
           
     }   
 return false; 
 }
</script>

Step2:

Style:

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


.down
{
    background:url(images/Downarrowblue.png) no-repeat 0 0;   
    width:16px;
    border-color: #337DB2 #337DB2 -moz-use-text-color;
    border-radius: 10px 10px 0 0 !important;
    border-style: solid solid none;
    border-width: 4px 4px 0;
    height: 34px !important;
    margin: 0 !important;
    width: 64px !important;
 
   
   
}
.action_dropdowncontainer {
    border: 4px solid #337DB2;
    font-size: 13px;
    height: auto;
    border-radius:0px 10px 10px 10px !important;
    margin: 0 10px 0 0;
    min-height: 50px;
    padding: 0 0 15px;
    position: absolute;
    width: 205px !important;
    z-index: 10;
}
.display_hide
{
    display:none;
}
.display_show
{
    display:block;
}
</style>

Step3: 

HTML Code :

<div style="height:250px;">

  <div class="up" id="divid-1" onClick="myfunction('divid-1','action_event','up','down')">  </div>

<div id="action_event"  class="dropdownlist actions action_dropdowncontainer border-radius white_bg w186 right display_hide">
                  <div class="action_event_strip"></div>
                  <div class="left"> <a href="#"><i class="icon-large level-1"><b class="left marginleft_33 white_color">1</b></i> <strong class="marginleft_5">View Level 1 </strong> </a></div>
                  <div class="left"> <a href="#"><i class="icon-large level-2"><b class="left marginleft_33 white_color">2</b></i> <strong class="marginleft_5">Request Level 2 </strong> </a></div>
                  <div class="left"><a href="#"> <i class="icon-large callback margintop_5"></i><strong class="paddingleft_8">Callback Pending</strong></a></div>
                  <div class="left"> <a href="#"><i class="icon-large validate left"></i><strong class="alignleft paddingleft_8 margintop_5 w110">Validate</strong></a></div>
                  <div class="left"> <a href="#"><i class="icon-large edit left"></i><strong class="alignleft paddingleft_8 margintop_5">Edit</strong></a></div>
                </div>

</div>



  <div class="up" id="divid-2" onClick="myfunction('divid-2','action_event-1','up','down')">  </div>

<div id="action_event-1"  class="dropdownlist actions action_dropdowncontainer border-radius white_bg w186 right display_hide">
                  <div class="action_event_strip"></div>
                  <div class="left"> <a href="#"><i class="icon-large level-1"><b class="left marginleft_33 white_color">1</b></i> <strong class="marginleft_5">View Level 1 </strong> </a></div>
                  <div class="left"> <a href="#"><i class="icon-large level-2"><b class="left marginleft_33 white_color">2</b></i> <strong class="marginleft_5">Request Level 2 </strong> </a></div>
                  <div class="left"><a href="#"> <i class="icon-large callback margintop_5"></i><strong class="paddingleft_8">Callback Pending</strong></a></div>
                  <div class="left"> <a href="#"><i class="icon-large validate left"></i><strong class="alignleft paddingleft_8 margintop_5 w110">Validate</strong></a></div>
                  <div class="left"> <a href="#"><i class="icon-large edit left"></i><strong class="alignleft paddingleft_8 margintop_5">Edit</strong></a></div>
                </div>

                </div>


 Step4:

Screenshot:

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


Enjoy Folks