title: Move divs down when top div expands
body: <p>I'm trying to create an expanding menu where each header controls a div of links. In fact, everything in my code is made of divs (i.e. headers and content). Whenever I click a header div, the content div grows and reveals its contents. My problem is is that the content div pushes everything else out of the way. It squeezes itself into the middle. What I want is a fixed active header while everything below it and its contents is pushed down. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var $switch = 1;
    var $last;
  
    // Closes drawers. Removes header 
    // selections.
    function clear() {
      $(".m-title").removeClass("active");
      $(".drawer").removeClass("open");
      $last = null;
    }
  
    /* • Opens/Closes drawer by its header. 
       • Enables consistent opening/closing of
         the same drawer.*/
    function load(element) {
      var $temp = element.index();
  
      if ($temp == $last)
        clear();
      else {
        clear();
        element.addClass("active");
        element.next().addClass("open");
        $last = element.index();
      }
  
    }
  
    // Listens for header clicks.
    $(".m-title").click(function() {
      load($(this));
    });
  
    // Does the same thing as clear(), but with   // a button.
    $("#button").click(function() {
      $(".m-title").removeClass("active");
      $(".drawer").removeClass("open");
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #595959;
  }
  #container {
    display: flex;
    justify-content: center;
    /*End FLEX*/
    min-width: 350px;
    width: 65%;
    height: 700px;
    margin-right: auto;
    margin-left: auto;
    background: #191919;
    border: solid 1px #101010;
    box-shadow: -1px 1px 0px 0px #555;
  }
  #m-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    /*End FLEX*/
    min-width: 300px;
    max-width: 500px;
    width: 65%;
    height: auto;
    border: solid 1px red;
    color: wheat;
  }
  .m-title {
    display: flex;
    justify-content: center;
    align-self: center;
    /*End FLEX*/
    width: 100%;
    border: solid 1px black;
    transition: .5s;
  }
  .m-title:hover {
    background: rgba(60, 60, 60, 0.5);
    cursor: pointer;
    transition: .5s;
  }
  .m-title:active {
    background: rgba(75, 75, 75, 0.5);
    transition: .1s;
  }
  .m-title span {
    align-self: center;
    /*End FLEX*/
    font-family: sans-serif;
    font-size: 24px;
    padding: 24px;
  }
  .m-title.active {
    background: rgba(160, 60, 60, 0.5);
    /*Highlights active header*/
  }
  .drawer {
    height: 0px;
    /*Closes drawer*/
    width: 100%;
    border: solid 1px green;
    align-self: center;
    transition: .5s;
  }
  .drawer.open {
    height: 100px;
    position: relative;
    transition: .5s;
  }
  #button {
    display: flex;
    justify-content: center;
    width: 75px;
    height: 50px;
    background: green;
  }
  #button:hover {
    cursor: pointer;
  }
  #button span {
    align-self: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="m-wrap"&gt;
      &lt;div id="m-map" class="m-title"&gt; &lt;span&gt;Site Map&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="m-draw1" class="drawer"&gt;&lt;/div&gt;
      &lt;div id="m-about" class="m-title"&gt; &lt;span&gt;About&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="m-draw2" class="drawer"&gt;&lt;/div&gt;
      &lt;div id="m-emp" class="m-title"&gt; &lt;span&gt;Employee Services&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="m-draw3" class="drawer"&gt;&lt;/div&gt;
      &lt;div id="m-serv" class="m-title"&gt; &lt;span&gt;Services&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="m-draw4" class="drawer"&gt;&lt;/div&gt;
      &lt;div id="button"&gt; &lt;span&gt;clear&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a <a href="http://jsfiddle.net/blutuu/gjxe8ndy/" rel="nofollow">fiddle</a> of what I've created. Funnily enough, the sidebar of jsfiddle acts the way I want my menu to act. Could this be done with all divs or should I go about this in another way?</p>