Question

Currently this top menu which is supposed to stretch all the way across 100%, when clicked and expanded, it seems to just be sliding down and pushing the rest of the page content down.

I would like the menu to come down but instead of pushing the whole page down, just sit on top of the page and expand down how ever far necessary.

$(document).ready(function() {
    // Expand Panel
    $("#open").click(function(){
        $("div#blurbPanel").slideToggle("slow");
    }); 
    // Collapse Panel
    $("#close").click(function(){
        $("div#blurbPanel").slideToggle("slow");
    });     
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     
});

What am I doing wrong?

Answer 1

I looked at the site, and i’m thinking its just a css issue. I’ve created a fiddle that does what you’re asking for. The panel has a position of absolute, therefore will be opened over the other element. I also changed your JS a bit. to this

$('#open-close-toggle').click(function(){
    $('#toggle-section').slideToggle(); 
    var buttonText = $(this).html();
    if(buttonText == "Open"){
        $(this).html("Close");
    }else{
        $(this).html("Open");
    }
});

Here is the fiddle example