How to Show and Update hidden div element by hovering on one of three buttons in Javascript?

I want to hover over on the buttons and want to show a hidden div/panel underneath it by using java script. My Javascript is externally included and works fine, i am trying to use the DOM model to change the style and innerHTML of the div but isnt working. This is my HTML, Javascript and CSS code below. I am even passing parameters to verify which button was hovered but failing. HTML

<div class="container">
     <div class="row anchorbutton">
          <div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
    <a href=#><div class=" mainbuttons b1 text-center"  
         onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout 
                                    Programs</div></a>
     </div>
     <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
          <a href=#><div class=" mainbuttons b2 text-center" 
             onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet 
               Plans</div></a>
     </div>
     <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
           <a href=#><div class=" mainbuttons  b3 text-center" 
            onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food 
             Supplements</div></a>
     </div>
     </div>
   </div>
  <div class="container">
   <div class="panel panel-default hidden">
       <div class="hoverable panel-body hidden"> </div>
    </div>
 </div>

JS

function hidepanel(){

var panel=document.getElementsByClassName("hidden");
panel.style.display=none;
}

 function updatepanel(x){
 var desc1="Get fully customized workout programs from our dedicated fitness 
 experts.";
 var desc2="Nutrional advice and diet plans just for your needs!";
 var desc3="Our very own state-of-the-art line of supplementations.Click to 
 Order";

  if(x==1){}
  document.getElementsByClassName('hidden').style.display='block';
  document.getElementsByClassName('hidden').innerHTML='desc1';
  }
   if(x==2){
   document.getElementsByClassName('hidden').style.display='block';
   document.getElementsByClassName('hidden').innerHTML='desc2';
   }
    if(x==3){
     document.getElementsByClassName('hidden').style.display='block';
      document.getElementsByClassName('hidden').innerHTML='desc3';
       }
   }

CSS

.hidden{
 display: none;
 }

I have also tried to change the functionality by changing the function to work on onClick instead of onmousehover but it wont work.Please help me out i have been banging my head.