title: dropdown menu not showing?
body: <p>I have 2 drop down menus which both have 'name'=list1. I also have 2 radio buttons 'yes' or 'no'. When select no all dropdown menus should be hidden, when selected 'yes' all drop down menus should show however at the minute only one is showing when clicked yes none showing when clicked no. </p>
  
  <p>JavaScript code to hide:</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
  function showDiv(targetElement,toggleElementClass){
    var els,
        i;
    if (targetElement.checked) {
      els = document.getElementsByClassName(toggleElementClass);
      for (i=0; i &lt; els.length; i++) {
         els[i].style.visibility = "visible";
         els[i].style.display = "block";
      }
    }
  }
  function HideDiv(targetElement,toggleElementClass){
    var els,
        i;
    if (targetElement.checked) {
      els = document.getElementsByClassName(toggleElementClass);
      for (i=0; i &lt; els.length; i++) {
         els[i].style.visibility = "visible";
         els[i].style.display = "block";
      }
  
  // and similar for hideDiv()
  &lt;/script&gt;
  </code></pre>
  
  <p>code for 1st dropdwon:</p>
  
  <pre><code>    &lt;div style="display: none;" class="list1" &gt;
  &lt;select name="colour"&gt;
    &lt;option&gt;Please Select&lt;/option&gt;
    &lt;option&gt;red&lt;/option&gt;
      &lt;option&gt;orange&lt;/option&gt;
      &lt;option&gt;blue&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>code for 2nd drop down:</p>
  
  <pre><code>    &lt;div id="list2" style="display: none;" class="list2" &gt;
  &lt;select name="shade"&gt;
    &lt;option&gt;Please Select&lt;/option&gt;
    &lt;option&gt;dark&lt;/option&gt;
      &lt;option&gt;light&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>only the 1st is displaying on webpage. does anyone know why?</p>