Push down footer when opening accordion

Question

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.

.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;
}

<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub">
    <ul>
        <li class="servicesubitem"> 
            <span class="subitem">
                Communications<br>
                &amp; Airtime
            </span>
            <span class="fa1 fa-phone"> </span>
        </li>
        <div class="servicesubli">
            <ul>
                <li>VSAT</li>
                <li>IRIDIUM</li>
                <li>GSM</li>
                <li>INMARSAT</li>
                <li>IDIRECT</li>
            </ul>
        </div>
        <li class="servicesubitem"> 
            <span class="subitem">
                IT &amp;<br>
                Networking
            </span>
            <span class="fa1 fa-sitemap"> </span>
        </li>
        <div class="servicesubli">
            <ul>
                <li>Built/Refit Consultancy</li>
                <li>Managed IT Support</li>
                <li>Networking (Wired &amp; Wireless)</li>
                <li>Backup &amp; Disaster Recovery</li>
                <li>Antivirus</li>
            </ul>
        </div>
    </ul>
</div>
<div id="serviceinfo"></div>
<div style="clear:both;"></div>
<div id="footer"></div>

I have made a JSFiddle with my code for the accordion and footer and was hoping someone would be able to help.

Answer 1

Simply set a margin on collapse and expand: https://jsfiddle.net/5qrkze88/3/

First thing, not sure what your project is, but I think setting the #footer width to 100% will give you better results.

Second thing, don't know why you set position to fixed, setting it to absolute will also improve your results.

$(document).ready(function ($) {
    $('.servicesub').find('.servicesubitem').click(function () {

        if ($(this).next().is(':visible')) {
            //Collapse
            $(this).next().slideToggle('fast');
            $(this).removeClass('active');

            $("#footer").animate({marginTop: "0px"}, 'fast');
        } else {
            //Expand
            $(this).next().slideToggle('fast');
            $(this).siblings().removeClass('active');
            $(this).addClass('active');

            //hide other panels
            $(".servicesubli").not($(this).next()).slideUp('fast');

            $("#footer").animate({marginTop: "260px"}, 'fast');

        }

    });
    $('.servicesub').find('.servicesubitem .active'); {
        //Expand
        $(this).addClass('active');
    }
});

Answer 2

$(document).ready(function ($) {
    $('.servicesub').find('.servicesubitem').click(function () {
        
        if($(this).next().is(':visible')) {
            //Collapse
            $(this).next().slideToggle('fast');
            $(this).removeClass('active');
        } else {
            //Expand
            $(this).next().slideToggle('fast');
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
    
            //hide other panels
            $(".servicesubli").not($(this).next()).slideUp('fast');

        }
        
    });
     $('.servicesub').find('.servicesubitem .active'); {
      //Expand
      $(this).addClass('active');
     }
 });

.servicesub { width: 200px; margin: 20px 0px; padding:10px; float:left; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 10px; text-align:center; 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; 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; }

#serviceinfo { width: 300px; height: 280px; border: 1px solid blue; float: right; }

#footer { width: 800px; height: 200px; background-color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
     <ul>
      <li class="servicesubitem">
       <span class="subitem">Communications
        <br>
        &amp; Airtime</span><span class="fa1 fa-phone"> </span>
      </li>
      <div class="servicesubli">
       <ul>
        <li>
         VSAT
        </li>
        <li>
         IRIDIUM
        </li>
        <li>
         GSM
        </li>
        <li>
         INMARSAT
        </li>
        <li>
         IDIRECT
        </li>
       </ul>
      </div>
      <li class="servicesubitem">
       <span class="subitem">IT &amp;
        <br>
        Networking</span><span class="fa1 fa-sitemap"> </span>
      </li>
      <div class="servicesubli">
       <ul>
        <li>
         Built/Refit Consultancy
        </li>
        <li>
         Managed IT Support
        </li>
        <li>
         Networking (Wired &amp; Wireless)
        </li>
        <li>
         Backup &amp; Disaster Recovery
        </li>
        <li>
         Antivirus
        </li>
       </ul>
      </div>
                            </ul>
                        </div>

    <div id="serviceinfo">
    
</div>
                        <div style ="clear:both;"></div>
<div id = "footer">
    
</div>

See just make changes in your css file.