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?
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");
}
});