title: Push down footer when opening accordion
body: <p>I have an accordion as my nav that I have fixed on the page but when opening the accordion it overlaps my footer, I have looked around and people are having the same problem but I can't seem to get any of the solutions to work with mine.</p>
  
  <pre class="lang-css prettyprint-override"><code>.servicesub {
      width: 200px;
      margin: 20px 0px;
      padding:10px;
      position: fixed;
  }
  .servicesub ul {
      list-style-type: none;
      padding: 0px;
      color: #fff;
  }
  .servicesub li {
      font-size: 14px;
      height: 70px;
      padding: 17px 0px 10px 20px;
      margin-top: 10px;
      text-transform: uppercase;
  }
  .servicesub li a {
      text-decoration: none;
  }
  .servicesub li a:hover {
      color:#fff;
  }
  .servicesub li {
      background-color: #017CEB;
  }
  .servicesub li:hover {
      background-color: #015BAC;
  }
  .servicesub li.active {
      background-color: #015BAC;
  }
  .servicesub span:after {
      color:#fff;
      font-family: FontAwesome;
      display: inline-block;
      width: 1.2em;
      font-size: 40px;
      position: absolute;
      text-align: center;
      margin-top: -9px;
  }
  .subitem {
      color:#fff;
      height:58px;
      width: 215px;
      position: absolute;
      right: 10px;
      text-align: center;
  }
  .servicesubitem {
      cursor: pointer;
  }
  .servicesubli {
      cursor: pointer;
      display: none;
  }
  .servicesubli.default {
      display: block;
  }
  .servicesubli ul {
      width: 100%;
      font-size: 14px;
  }
  .servicesubli li {
      padding: 8px;
      margin-top: 1px;
      text-transform: uppercase;
      height: 35px;
      text-align: center;
  }
  .servicesubli a {
      text-decoration: none;
      color: #fff;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub"&gt;
      &lt;ul&gt;
          &lt;li class="servicesubitem"&gt; 
              &lt;span class="subitem"&gt;
                  Communications&lt;br&gt;
                  &amp;amp; Airtime
              &lt;/span&gt;
              &lt;span class="fa1 fa-phone"&gt; &lt;/span&gt;
          &lt;/li&gt;
          &lt;div class="servicesubli"&gt;
              &lt;ul&gt;
                  &lt;li&gt;VSAT&lt;/li&gt;
                  &lt;li&gt;IRIDIUM&lt;/li&gt;
                  &lt;li&gt;GSM&lt;/li&gt;
                  &lt;li&gt;INMARSAT&lt;/li&gt;
                  &lt;li&gt;IDIRECT&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;li class="servicesubitem"&gt; 
              &lt;span class="subitem"&gt;
                  IT &amp;amp;&lt;br&gt;
                  Networking
              &lt;/span&gt;
              &lt;span class="fa1 fa-sitemap"&gt; &lt;/span&gt;
          &lt;/li&gt;
          &lt;div class="servicesubli"&gt;
              &lt;ul&gt;
                  &lt;li&gt;Built/Refit Consultancy&lt;/li&gt;
                  &lt;li&gt;Managed IT Support&lt;/li&gt;
                  &lt;li&gt;Networking (Wired &amp;amp; Wireless)&lt;/li&gt;
                  &lt;li&gt;Backup &amp;amp; Disaster Recovery&lt;/li&gt;
                  &lt;li&gt;Antivirus&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="serviceinfo"&gt;&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have made a <a href="https://jsfiddle.net/5qrkze88/" rel="nofollow">JSFiddle</a> with my code for the accordion and footer and was hoping someone would be able to help. </p>