title: Rotation of CSS arrow and javascript toggling
body: <p>I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath.  Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.</p>
  
  <p>Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.  </p>
  
  <p><a href="http://jsfiddle.net/nVuQ2/1/" rel="noreferrer">http://jsfiddle.net/nVuQ2/1/</a></p>
  
  <p>I've tried messing with the placement of the arrow: </p>
  
  <pre><code>.tri0 {
      margin-left: 20px;
      margin-top: 5px;
  }
  </code></pre>
  
  <p>but the best I can do is push the <code>tri0</code> arrow up to the padding of the <code>h3</code> tag and it won't go any farther.  </p>
  
  <p>Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?</p>