title: How do I move others divs around upon clicking my jQuery event?
body: <p>I have inserted a jQuery event into my webpage which allows for a div in my page to expand to reveal more content. I'm having a problem with the surrounding divs not moving down to accommodate for the space needed to display the expanded div.</p>
  
  <p>I initially tested this div in a separate document and found it to work successfully without too much fuss. I worked with other divs to be sure that they'd move upon clicking the event. Upon inserting the same code into my already developed web page however, the surrounding divs remain fixed and the expansion works behind those divs. Why might this be? Could it be that one of my divs beneath the expanded one is somehow fixed?</p>
  
  <p>I researched the CSS property 'position' but can't make any link between these contributing to the problem.</p>
  
  <p>Incase the problem relates to that of my expanded div (instead of the surrounding divs), I shall only post the code for the HTML, CSS &amp; Javascript/jQuery that directly relates to that particular part of my webpage. Please request any further code if you feel it's necessary.</p>
  
  <p>Thank you for taking time to read.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="showmorelocations-container"&gt;&lt;p&gt;More Locations&lt;/p&gt;
      &lt;div class="toggler-expand"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#showmorelocations-container {
      height: 100px;
      line-height: 150px;
      width: auto;
      margin: auto;
      margin-bottom: 50px;
  }
  
  #showmorelocations-container p {
      text-align: center;
      font-family: 'Hind', sans-serif;
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      line-height: 100px;
  }
  
  .toggler-expand {
      height: 400px;
      width: auto;
      background-color: #FFBBBB;
      display: none;
      margin-top: -25px;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(function() {
      $('#showmorelocations-container').click(function() {
          $(this).find('.toggler-expand').slideToggle();
      });
  });
  </code></pre>