在页脚上使用slidetoggle时，如何从顶部推入所有元素？

Question

I have a footer, and when this one is clicked I want it to slide toggle up and push all the elements from the top without overlapping them.

This is the first view

And this is the view after clicking the yellow element

I was not able to reproduce this on jsfiddle. Here is my css, my js and my bottom html

$("li#dropdown").on('click', function(e) {
    $('#toggleList').slideToggle();
    e.preventDefault();
});

Here is my bottom CSS, using LESS

footer {
    background-color: #F8F8F8;
    text-align: center;
    padding-top:36px;
    position: absolute;
    width: 100%;
    bottom: 0;
    display:inline-block;
    nav {
        //margin-top:36px;
        ul {
            list-style-type: none;
            margin:0;
            padding:0;
            text-align: center;
            li {
                display:inline-block;
                a {
                    text-decoration: none;
                    font: normal 16px "proxima_novasemibold", helvetica;
                    color: #828282;
                    padding:0 8px;
                    margin-left: 5px;
                    &:hover {
                        text-decoration: none;
                        color: @pale-green;
                    }
                }
                &#dropdown {
                    cursor: pointer;
                }
            }
            li:last-child a span {
                background:url(../img/arrow.jpg) no-repeat;    
                width:16px;
                height:12px;
                display:inline-block;
                margin-left: 5px;
            }
        }
        .franchise-list {
            text-align: justify;
            display: inline-block;
            margin:23px 0;
            h4 {
                text-transform: uppercase;
                margin:5px 0;
                font-size: 12px;
                font-weight: bold;
                color: #666;                    
            }
            span {

            }
            .franchise-col {
                float:left;
                font-size: 11px;
                margin-left:20px;
            }
        }
    }
    .bottom-info {
        font: normal 12px "proxima_novasemibold", helvetica;
        padding-top: 26px;
        padding-bottom: 18px;
        background-color: #F8F8F8;
        text-align: center;
        span {
            color:#696969;
        }
        div {
            display:inline;
            color: #199151;
            a {
                color:#199151;
                text-decoration: underline;
            }
        }
    }  
}  

And Here is my bottom HTML

<footer>
<nav>
    <ul>
        <li><a href="">ABOUT APPLE AUTO GLASS</a></li>
        <li><a href="">SIX POINT CARE PROCESS&#8482;</a></li>
        <li><a href="">HASSLE FREE INSURANCE CLAIMS</a></li>
        <li><a href="">FAQ</a></li>
        <li id="dropdown"><a>APPLE AUTO GLASS STORES<span class="dropdown-stores"></span></a></li>
    </ul>  
    <div class="franchise-list" id="toggleList" style="display:none;">   
    <?php 
        $regions = [];
        $listFranchises = [];
    ?>
@foreach($franchises as $key => $value)            
        <?php 
            $listFranchises[$key] = [$value->region, $value->town, $value->address];
            if (!(in_array($value->region, $regions))) {
                array_push($regions, $value->region);
            }                                     
        ?>
@endforeach
    <?php
        $counter = 0;
        $franchiseList = count($listFranchises) + count($regions);
        $marker = true;
        foreach($regions as $region) {           
            if ($counter%14 === 0 && $marker) {
                echo ('<div class="franchise-col">');             
            }
            else {
                $marker = true;
            }
            $counter += 1;
            echo ('<h4 counter="'.$counter.'/'.$franchiseList.'">'.$region.'</h4>');               
            foreach($listFranchises as $key => $value) {                  
                if($region === $value[0]) {
                    $counter += 1;
                    echo ('<span counter="'.$counter.'/'.$franchiseList.'"><a href="#">'.$value[1].'</a> - '.$value[2].'</span><br>');
                    if ($counter%14 === 0) {
                        echo ('</div>');
                    }
                    if ($counter%14 === 0 && ($franchiseList-$counter > 0)) {
                        echo ('<div class="franchise-col">'); 
                        $marker = false;
                    }
                    if (($franchiseList - $counter) == 0) {
                        echo ('</div>');
                    }
                } 
            }                 
        }
    ?>  

    </div>
</nav>
<div class="bottom-info">
    <span>Copyright &#169; <?php echo date('Y') ?> Apple Auto Glass &#174;. All Rights Reserved.</span>
    <div>
        <a href="">Terms of Use</a> |
        <a href="">Privacy Policy</a>
    </a>
</div>   

Answer 1

Here's one way, not optimized or cleaned up at all, but it works:

http://jsfiddle.net/b6rkb/40/

$(document).ready(function () {
    var panelHeight = $("#panel").show().height(),
        docHeight = $(document).height(),
        panelToggle = false,
        maxTopOffset = $(".page").offset().top + $(".page").outerHeight();
    $("#panel").css("height","0px");
    $("#flip").click(function () {
        var targetHeight;
        if (panelToggle) {
            targetHeight = 0;
        } else {
            targetHeight = panelHeight;   
        }
        panelToggle = !panelToggle;
        $("#panel").finish().animate({
            height: targetHeight   
        },{
            step: function(height) {
                if (panelToggle) {
                    var distance = maxTopOffset - $(".footer").offset().top;                
                    if (distance > -10) {
                        $(".footer").css("position","relative");
                    }
                } else {
                    console.log(docHeight,$(document).height())
                    if ($(document).height() == docHeight) {
                        $(".footer").css("position","absolute");
                    }                    
                }

            },
            duration: 500
        });
    });
});

It uses two different techniques.

When opening the panel, i check the distance between the top of the panel and the bottom of the page. When it is 10px from the bottom or less, i change the position of the footer to block so that it won't overlap.

When closing the panel, I wait for the body height to go back to it's original height. When that happens, I change the position back to absolute. Obviously you will have to modify this to fit your page, but the concept should work.