title: Wordpress - Javascript Toggle Div elements display styles
body: <p>I have a code that I am working on so that it has a heading tag and an arrow floated to the right and when you click on that arrow it shows the contents of the hidden element and changes the down arrow to an up arrow. Everything seems to work fine except the links I have under the image within the toggle do not work. I cannot highlight the text for some reason so I am assuming that there is an overlap somewhere in my coding. </p>
  
  <p>The JavaScript</p>
  
  <pre><code>    function toggleDisplayNewark() {
      document.getElementById("toggleMe").style.display == "none";
      if(document.getElementById("toggleMe").style.display == "none" ) {
          document.getElementById("toggleMe").style.display = "inline";
          document.getElementById("toggleMe").style.visibility = "visible";
          document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
      } else {
          document.getElementById("toggleMe").style.display = "none";
          document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
      }
  }   
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>            &lt;div id='newark'&gt;
                      &lt;div class='text-heading'&gt;
                          &lt;h2&gt;Newark&lt;/h2&gt;
                          &lt;a href="#newark" onclick="toggleDisplayNewark();"&gt;
                              &lt;div id='arrow'&gt;&lt;/div&gt;
                          &lt;/a&gt;    
                      &lt;/div&gt;
                      &lt;div id='toggleMe' style='display: none;'&gt;  
                          &lt;div class='alignleft thumb-imgs'&gt;
                              &lt;img src='img/excercise.png' /&gt;
                              &lt;a href='http://exercise.com/' target='_blank'&gt;Exercise Institute&lt;/a&gt;
                          &lt;/div&gt;                      
                          &lt;div class='clear'&gt;&lt;/div&gt;   
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS </p>
  
  <pre><code>#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}   
  #toggleMe {display: none;}
  .text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
  .clear {clear: both;}
  .thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}
  </code></pre>
  
  <p>I built this in a html file before I put it into wordpress so I could make sure that it works properly. I just can't seem to find where the problem lies. I have striped down the coding so that it would not take up so much space. The idea of this is to have a heading with an arrow in the right side to drop down this box with 3 images with a link under each one for each line.</p>
  
  <p>Thanks for your help in advance.</p>