title: Javascript text box hover on mouse over
body: <p>I have a very simple javascript code that I need for my website but it doesn't work as I wished... It is about a text hover box that apears and disapears when I mouseover a button. The code works with one button but I need more of them. It seems that when I add the second button with the same hoverbox effect it doesn't work any more (it hovers only the second text when I mouse over on any of the buttons). My question is hov can I add the same hoverbox effect but with different text on each box, to multiple buttons. Here is what I got so far...</p>
  
  <p>The Javascript:</p>
  
  <pre><code>var oVTog = 
  {
      toggle: function (el) 
      {
          oVTog.container = el.parentNode;
          oVTog.para = oVTog.container.getElementsByTagName('p')[0];  
          oVTog.para.style.display = "none";
  
          el.onmouseover = function () 
          {
              oVTog.para.style.display = '';
              return false;
          };
  
          el.onmouseout = function () 
          {
              oVTog.para.style.display = 'none';
              return false;
          };
  
          el.onclick = function () 
          {
              oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
              return false;
          };
      }
  };
  
  window.onload = function () 
  {
      var l = document.getElementById('togTrigger');
      oVTog.toggle(l);
      var l = document.getElementById('togTrigger2');
      oVTog.toggle(l);
  };
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a 
  {
      text-decoration: none;
   outline: none;
  }
  
  div#page 
  {
      margin: 60px auto;
      border: 1px solid #dedede;
      width: 910px;
  }
  
  .TogWrap 
  {
      width: 400px;
      padding: 22px;
  }
  
  #togTrigger 
  {
      border: 1px solid #bebebe;
      padding: 7px 8px;
      background: #df7623;
      color: #fff;
  }
  
  .togContent  
  {
      margin-top: 9px;
      border: 1px solid #bebebe;
      padding: 16px 10px 10px 10px;
      background: #ededed;
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;body id="bd"&gt;
      &lt;div id="theTog" class="TogWrap"&gt;
          &lt;a href="#" id="togTrigger"&gt;Lorem ipsum One&lt;/a&gt;
          &lt;p class="togContent"&gt;
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
              Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
              convallis, sagittis vitae, convallis sit amet, lectus.
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="theTog" class="TogWrap"&gt;
          &lt;a href="#" id="togTrigger2"&gt;Lorem ipsum One&lt;/a&gt;
          &lt;p class="togContent"&gt;
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
              Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
              convallis, sagittis vitae, convallis sit amet, lectus.
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>