title: Jquery Slide/Toggle works but overlaps div below
body: <p>I have been trying the jquery slide/toggle function and I am able to get it to work using the code below (when the content of the '.Panel' Div stacks on top of each other).</p>
  
  <p>Jquery</p>
  
  <pre><code>&lt;script&gt; 
  $(document).ready(function(){
  $(".Flip").click(function(){
  $(".Panel").slideToggle("slow");
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="Flip"&gt;
    &lt;p&gt;Flip Heading&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="Panel"&gt;
  
    &lt;div class="Flipimages"&gt;
      &lt;img src="#" alt="#" style="width:100%"&gt;
      &lt;img src="#" alt="#" style="width:100%"&gt;
    &lt;/div&gt;
  
    &lt;div class="Fliptext"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.Flip {
  width: 95%;
  margin: 0 auto;
  text-align: center;
  background-color: rgb(183,57,118);
  border: 2px solid rgb(183,57,118);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  margin-top: 40px;
  }
  
  .Panel {
  width: 95%;
  margin: 0 auto;
  padding: 10px;
  display: none;
  font-family: arial;
  border: 2px solid rgb(183,57,118);
  border-top: none;
  }
  </code></pre>
  
  <p>I have 4 of these on the same page (all using different names so separate functions) and the problem occurs when I try and float the div elements inside div '.Panel'.</p>
  
  <pre><code>.Flipimages {
  width: 50%;
  float: left;
  }
  
  .Fliptext {
  width: 45%;
  float: left;
  margin-left: 20px;
  }
  </code></pre>
  
  <p>I am trying to float them left so the images and text sit alongside each other rather than on top of each other. The CSS works fine but when clicking on the 'Flip' div, it doesn't push the page content below it down. It overlaps it and looks very messy. This works fine when I don't float the above elements left but cannot think of a reason as to why this is affecting it.</p>
  
  <p>Anyone have any ideas?</p>
  
  <p>ps - I hope I explained this ok.</p>
  
  <p>Thanks</p>
  
  <p>Chris</p>