title: How to hide/show drop down in javascript on click of button
body: <p>I am trying to show a drop down to user but only when the user click on a button, I tried it several ways but no luck, I have put both buttons and select-box for now in same div but it still not working. as when user clicks on "Add Stock " button it should open up the drop down.</p>
  
  <pre><code>&lt;head&gt;&lt;h1&gt;CRS&lt;/h1&gt;&lt;/head&gt;
  &lt;button id = 'newEntry' onclick="newBill()"&gt;Create New Bill&lt;/button&gt;
  &lt;button id= 'clearEntry'&gt; Reset &lt;/button&gt;
  &lt;button id= 'dailyReport' &gt; Report &lt;/button&gt;
  &lt;div&gt;
      &lt;button id= 'AdditemToStock'  onclick="askCategory()"&gt;Add Stock&lt;/button&gt;
      &lt;select style="visibility:hidden;" id="showInDropDown"&gt;
          &lt;option disabled="disabled" selected="selected"&gt;Choose Category&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id="NewBillMsg"&gt; &lt;/div&gt;
  &lt;div id="addToCartMsg"&gt; &lt;/div&gt;
  
  &lt;div id="itemList" style="display:none"&gt;
  
      &lt;h3&gt;Select items&lt;/h3&gt;
      &lt;select name="items" id="itemIndex" onclick="selectedItem()"&gt;
          &lt;option selected="selected"&gt;Select Items&lt;/option&gt;
          &lt;option value="chocolate"&gt;chocolate&lt;/option&gt;
          &lt;option value="Eggs"&gt;Eggs&lt;/option&gt;
          &lt;option value="Bread"&gt;Bread&lt;/option&gt;
          &lt;option value="Milk"&gt;Milk&lt;/option&gt;
      &lt;/select&gt; 
  &lt;/div&gt;
  
  &lt;script&gt;            
      function cashRegister() {
          total= 0;
          addBill:function () {
              this.total+=itemCost;
              document.getElementById('NewBillMsg').innerHTML = "New";
              document.getElementById('itemList').style.display="block";      
          },
  
          scan: function(item,quantity) {
              switch (item) {
                  case "Eggs": this.add(0.98 * quantity); break;
                  case "Milk": this.add(1.23 * quantity); break;
                  case "Bread": this.add(4.99 * quantity); break;
                  case "chocolate": this.add(0.45 * quantity); break;
              }
              return true;
          //addToCart: function () {
              //document.getElementById('addToCartMsg').innerHTML = "Enter Quantity ";
          //},
          askCategory: function () {
              button.onclick = function() {
              document.getElementById('showInDropDown').style.display="block";                
              },
          };
  &lt;/script&gt;
  </code></pre>