Как исправить перекрытие гармошки в нижнем колонтитуле

Я новичок в jQuery. Я использую Аккордеон. Когда я нажимаю на аккордеон, он накладывается на нижний колонтитул. Как я могу избежать этого

Ниже приведен код нижнего колонтитула -

<footer>
    <div class="row footer_class">
        <div class="container">
            <div class="col-lg-8 font_color">Copyright &#169; 2013</div>
            <div class="col-lg-2  pull-right font_color">Powered by Test</div>
        </div>
    </div>
</footer>  

Ниже приведена картина того, как аккордеон перекрывает нижний колонтитул.
Я не хочу, чтобы он перекрывал нижний колонтитул, но нижний колонтитул должен опускаться ниже аккордеона, когда открывается складное меню. Ниже приведен CSS для нижнего колонтитула -

.row_color{
border:2px solid #A40F17;
margin:0px;
}
.footer_class{
background-color:#A40F17;
height:40px;
color:#fff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position : relative;
}

Но все же нижний колонтитул перекрывает аккордеон