title: replicating this effect in html with jquery accordion
body: <p>Hi i need to make a full height accordion from bottom to top similar to this website
  <a href="http://www.chequerscapital.com/" rel="nofollow">http://www.chequerscapital.com/</a> (i also have a footer below the accordion).</p>
  
  <p>The content is loaded as the page loads, so there's no ajax involved, I tried to use the jQuery accordion plugin but ran into problems using it
  - the first problem is making it 100% height, 
  - second one is that jquery hides all divs inside the parent section</p>
  
  <p>Here's the jsfiddle link for my problem, any information is appreciated maybe i need to rethink the tools used or the page structure? The code is needed only for the major new browsers (from IE 10)</p>
  
  <p><a href="http://jsfiddle.net/4Cm4j/2/" rel="nofollow">http://jsfiddle.net/4Cm4j/2/</a></p>
  
  <hr>
  
  <pre><code>&lt;div id="primary" class="content-area"&gt;
      &lt;main id="main" class="site-main" role="main"&gt;
          &lt;div class="accordion"&gt;
              &lt;header&gt; &lt;a href="#"&gt;Leistungen&lt;/a&gt;
  
              &lt;/header&gt;
              &lt;section&gt;
                  &lt;article id="post-4" class="post-4 page type-page status-publish hentry"&gt;
                      &lt;header class="entry-header"&gt;
                              &lt;h1 class="entry-title"&gt;Leistungen&lt;/h1&gt; 
                      &lt;/header&gt;
                      &lt;!-- .entry-header --&gt;
                      &lt;div class="entry-content"&gt;&lt;/div&gt;
                      &lt;!-- .entry-content --&gt;
                      &lt;footer class="entry-footer"&gt;   &lt;span class="edit-link"&gt;&lt;a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=4&amp;amp;action=edit"&gt;Edit&lt;/a&gt;&lt;/span&gt;  
                      &lt;/footer&gt;
                      &lt;!-- .entry-footer --&gt;
                  &lt;/article&gt;
                  &lt;!-- #post-## --&gt;
              &lt;/section&gt;
              &lt;header&gt; &lt;a href="#"&gt;Team&lt;/a&gt;
  
              &lt;/header&gt;
              &lt;section&gt;test&lt;/section&gt;
              &lt;header&gt; &lt;a href="#"&gt;Track record&lt;/a&gt;
  
              &lt;/header&gt;
              &lt;section&gt;
                  &lt;article id="post-6" class="post-6 page type-page status-publish has-post-thumbnail hentry"&gt;
                      &lt;header class="entry-header"&gt;
                              &lt;h1 class="entry-title"&gt;Track record&lt;/h1&gt;   
                      &lt;/header&gt;
                      &lt;!-- .entry-header --&gt;
                      &lt;div class="entry-content"&gt;
                          &lt;img width="1200" height="230" src="trackrecord.jpg" class="attachment-full wp-post-image" alt="trackrecord"&gt;
                      &lt;/div&gt;
                      &lt;!-- .entry-content --&gt;
                      &lt;footer class="entry-footer"&gt;   &lt;span class="edit-link"&gt;&lt;a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=6&amp;amp;action=edit"&gt;Edit&lt;/a&gt;&lt;/span&gt;  
                      &lt;/footer&gt;
                      &lt;!-- .entry-footer --&gt;
                  &lt;/article&gt;
                  &lt;!-- #post-## --&gt;
              &lt;/section&gt;
              &lt;header&gt; &lt;a href="http://localhost/c4v/?page_id=13"&gt;Kontakt&lt;/a&gt;
  
              &lt;/header&gt;
              &lt;section&gt;
                  &lt;article id="post-13" class="post-13 page type-page status-publish hentry"&gt;
                      &lt;header class="entry-header"&gt;
                              &lt;h1 class="entry-title"&gt;Kontakt&lt;/h1&gt;    
                      &lt;/header&gt;
                      &lt;!-- .entry-header --&gt;
                      &lt;div class="entry-content"&gt;&lt;/div&gt;
                      &lt;!-- .entry-content --&gt;
                      &lt;footer class="entry-footer"&gt;   &lt;span class="edit-link"&gt;&lt;a class="post-edit-link" href="http://localhost/c4v/wp-admin/post.php?post=13&amp;amp;action=edit"&gt;Edit&lt;/a&gt;&lt;/span&gt; 
                      &lt;/footer&gt;
                      &lt;!-- .entry-footer --&gt;
                  &lt;/article&gt;
                  &lt;!-- #post-## --&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/main&gt;
      &lt;!-- #main --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  .accordion {
      z-index: 100;
      position: fixed;
      bottom: 3em;
      width: 100%;
      left: 0;
  }
  .accordion header {
      background-color: #ccc;
      border-top: 2px solid #fff;
      margin: 0;
      padding: 0;
      padding: .4em 0;
  }
  .accordion header a {
      display: block;
      text-transform: uppercase;
      font-size: 1em;
      color: #fff;
      text-decoration: none;
      font-family:'Arial';
  }
  .accordion&gt;section {
      margin:0 auto;
      width:1000px
  }
  </code></pre>
  
  <hr>
  
  <pre><code>$(function () {
      $(".accordion").accordion({
          header: "header",
          collapsible: true,
          icons: false,
          active: false,
          fillSpace: true
      });
  });
  </code></pre>