title: Container that toggles should move other container up
body: <p>I am creating a very basic html page with a sticky footer, one container which contains text and there should also be one container just above the footer that toggles but right now the container overlaps the text when opened!</p>
  
  <p>i want the content from the container with text to move up when the other container is shown / toggled!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    font-family: 'Comfortaa', sans-serif;
    background-color: #ffffff;
    min-height: 100%;
  }
  
  .background {
    background: url(bg4.png) #e8f1d5 no-repeat left top;
    background-size: contain;
    height: 100vh;
  }
  
  .text {
    text-align: right;
    padding-top: 5%;
    padding-right: 5%;
  }
  
  #partner-toggle {
    position: fixed;
    bottom: 50px;
    text-align: center;
  }
  
  .partner {
    padding: 15px;
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: rgb(235, 237, 249);
    /* Farbcode #ebedf9 */
    text-align: center;
    display: none;
  }
  
  .partner img {
    margin: 10;
  }
  
  .toggle-partner {
    cursor: pointer;
    background-color: #c1e1f0;
    width: 300px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    padding-top: 10px;
    font-size: 1.2em;
    align-content: center;
    border: none;
  }
  
  footer {
    height: 50px;
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #46a4d2;
    padding: 5px;
    color: #ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="background container-fluid"&gt;
    &lt;div class="container-fluid text"&gt;
      Text....
    &lt;/div&gt;
    &lt;div id="partner-toggle" class="container-fluid"&gt;
      &lt;button class="toggle-partner"&gt;Partner &amp;nbsp; &amp;nbsp;&lt;span class="glyphicon glyphicon-menu-up"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;div class="partner container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12"&gt;
            Logo1
  
          &lt;/div&gt;
  
          &lt;div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12"&gt;
            Logo2
  
          &lt;/div&gt;
  
          &lt;div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12"&gt;
            Logo 3
          &lt;/div&gt;
  
          &lt;div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12"&gt;
            Logo 4
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer class="container-fluid"&gt;
    ...
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>