Toggle and overlap content in jQuery

this is开发者_如何学Python how I toggle content

$("#content").hide(); 
    $(".toggle").click(function(){  
    if($(this).attr("class") == "toggle"){
        $(this).removeClass("toggle");
        $(this).addClass("add_active");
    }else{
        $(this).removeClass("add_active");
        $(this).addClass("toggle");
    }
    $("#content").slideToggle("fast");
    return false;
});

Here is my jsfiddle: http://jsfiddle.net/4ZrDb/

Like you can see the content below slides down according to the animation of the toggle. But I want the content that is revealed by the toggle to cover the other content, the #content should overlap the other content that is for now just pushed down.

Any ideas how to do that?

You can do this with CSS here:

#content { background: #fff; position: absolute; width: 100% }

also move toggle paragraph before content div like this:

<p class="toggle">Toggle</p>
<div id="content">Test</div>
<div>Other Content below</div>

http://jsfiddle.net/jsweazy/4ZrDb/19/

You need this

$("#content").hide();
    $(".toggle").click(function(){    

        $("#content").slideToggle("fast");
        $("#othercontent").slideToggle("fast");  

    return false;
});

http://jsfiddle.net/enthusiastic/4ZrDb/27/

Try something like this:

HTML:

<div id="header">
    Some text at the top
</div>
<div id="slide">
    <div id="content">Test<br>content<br>for<br>slide</div>
    <p class="toggle">Toggle</p>
</div>
<div id="below">Other Content below</div>

CSS:

p.toggle{
    cursor:pointer; font-size:13px; font-weight:bold;  color:#5b5b5b;
    margin:0px; padding:0px; padding-left:18px;
}

p.add_active{
    cursor:pointer; font-size:13px; font-weight:bold;  color:#5b5b5b;
    margin:0px; padding:0px; padding-left:18px;
}

#slide {
    position:fixed;
    background: #ccc;
    display: block;
    width: 100%;
}
#content {
    display: block;

}
#below {
    margin-top: 20px;
}

JS code is the same as you posted. http://jsfiddle.net/Z3MdY/