Using JavaScript Show or Hide Div content on Button click or link Click

1. Add Style and JavaScript in header section 

<style type="text/css">




.container {
width: 100%;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}


.sidebar1 {
float: left;
text-align:center;
width: 33%;
padding: 10px 0;
}
.content {
padding: 10px 0;
width: 33%;
float: left;
text-align:center;
}
.sidebar2 {
float: left;
width: 34%;

padding: 10px 0;
text-align:center;
}


</style>


<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
    var ele = document.getElementById("showHideDiv");
    if(ele.style.display == "block") {
            ele.style.display = "none";
      }
    else {
        ele.style.display = "block";
    }
}
// ]]></script>


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


2. Add below Div in body section


<div class="container">
  
<div class="sidebar1">


<a href="#" onclick="return showHide();" > Show Hide </a>
   
<div id="showHideDiv" style="display:none;">


<input name="" type="button" value="Facebook"> <input name="" type="button" value="Share"> <input name="" type="button" value="Email">


</div>
   
<!-- end .sidebar1 --></div>
    
  <div class="content">
<input name="" type="button" value="button1">
       
 <!-- end .content --></div>
<div class="sidebar2">


<input name="" type="button" value="button1">
<!-- end .sidebar2 --></div>
  
  <!-- end .container --></div>