title: JQuery SlideToggle Sliding Down, then back up to cover content
body: <h3>Fixed it! I had my dt and dd set to float: left so when the toggle went do, the header tried to take its place next to the content and covered it? Not sure, but taking the float left off fixed it. Now if someone could explain why...</h3>
  
  <p>I'm not sure how to illustrate the problem but I have... </p>
  
  <pre><code> &lt;section id="contact-page"&gt;
  &lt;div class="contact-wrapper"&gt;
      &lt;h1&gt;Contact Us&lt;/h1&gt;
      &lt;dl class="contact"&gt;
          &lt;dt&gt;Contact&lt;/dt&gt;
          &lt;dd&gt;Email: &lt;a href="mailto:myemail@gmail.com"&gt;myemail@gmail.com&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;Phone: (812 000 0000)&lt;/dd&gt;
      &lt;/dl&gt;
      &lt;dl class="address"&gt;
          &lt;dt&gt;Address&lt;/dt&gt;
          &lt;dd&gt;I forgot to take out my addrss&lt;/dd&gt;
          &lt;dd&gt;CHere too...&lt;/dd&gt;
          &lt;dd&gt;United States&lt;/dd&gt;
      &lt;/dl&gt;
      &lt;dl class="business-hours"&gt;
          &lt;dt&gt;Business Hours&lt;/dt&gt;
          &lt;dd&gt;Monday &amp;mdash; Friday&lt;/dd&gt;
          &lt;dd&gt;10am to 6pm&lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Very pertinent Javascript</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(e){
  
     $('#contactclick').on('click',function(){
  
        $('#contact-page').slideToggle();
  
     });
  
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>The slide down occurs, but once it hits the bottom, it slides back up so only the h1 heading "Contact Us" is shown. Could it be an issue with margins or something? New to js, so this is bugging me. </p>
  
  <p>Pertinent CSS</p>
  
  <pre><code>    .contact-page {
      overflow: hidden;
  }
  
  #contact-page {
      clear: both;
      color: #FFF;
      display: none;
      font-family: 'Fenix', serif;
      font-size: 1.8rem;
      letter-spacing: .12rem;
      padding-bottom: 1.5rem;
      padding-top: 6rem;
      text-align: center;
      width: 100%;
  }
  #contact-page dl {
      float: left;
      margin-top: 2rem;
      text-align: center;
      width: 20%;
  }
  #contact-page dl dd {
      line-height: 1.7rem;
      margin: 0;
  }
  #contact-wrapper {
      background: rgba(0 0 0 .1);
      display: ;
      margin: 0 auto;
      position: relative;
      width: 100%;
  }
  
  dl {
      float: left;
      margin-top: 2rem;
      text-align: center;
      width: 20%;
  }
  
  dd {
      margin: 0 0 0 40px;
  }
  </code></pre>
  
  <p>Now with Before and After Images!
  <a href="http://imgur.com/2VfXaLw,aryV2VD#0" rel="nofollow">http://imgur.com/2VfXaLw,aryV2VD#0</a></p>