I would appreciate some help and insight on a solution to this problem. I am developing a website with a header div of initial visible height of 180px. The header div is 340px in total height. When a user clicks on a link, I am needing the header div to slide down to reveal the rest (top) of itself. So, mathematically speaking, when a user loads the page, the bottom 180px of the 340px header div will be displayed. When they click the link, the rest of the div slides down to reveal its top 160px. When a user clicks the same link, the header div slides back up so only the bottom 180px is displayed again.

I have tried getting this to work, but am not sure what I am doing wrong. My initial thinking was to use slideToggle() (hide/show), but I can't seem to get that to work. Others on StackOverflow suggest animate(), but I don't know how to get that to work either.

I have searched on StackOverflow and seem to find a lot of questions regarding showing and hiding an entire div, but the problem is this pletely shows and hides the divs. I am needing my div to slide down to reveal the top hidden portion and then slide back up to it's original resting position (-160px offscreen).

Any help would greatly be appreciated! I have included my starter code below:

HTML:

<div id="header">
    <a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

JQuery:

$(document).ready(function(){
    $('.toggle').click(function(){
        $('#header').slideToggle("slow");
        return false;
    });
});

CSS:

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 160px;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 10;
}

I would appreciate some help and insight on a solution to this problem. I am developing a website with a header div of initial visible height of 180px. The header div is 340px in total height. When a user clicks on a link, I am needing the header div to slide down to reveal the rest (top) of itself. So, mathematically speaking, when a user loads the page, the bottom 180px of the 340px header div will be displayed. When they click the link, the rest of the div slides down to reveal its top 160px. When a user clicks the same link, the header div slides back up so only the bottom 180px is displayed again.

I have tried getting this to work, but am not sure what I am doing wrong. My initial thinking was to use slideToggle() (hide/show), but I can't seem to get that to work. Others on StackOverflow suggest animate(), but I don't know how to get that to work either.

I have searched on StackOverflow and seem to find a lot of questions regarding showing and hiding an entire div, but the problem is this pletely shows and hides the divs. I am needing my div to slide down to reveal the top hidden portion and then slide back up to it's original resting position (-160px offscreen).

Any help would greatly be appreciated! I have included my starter code below:

HTML:

<div id="header">
    <a href="#header" class="toggle">Click me to reveal the top half of this div</a>
</div>

JQuery:

$(document).ready(function(){
    $('.toggle').click(function(){
        $('#header').slideToggle("slow");
        return false;
    });
});

CSS:

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 160px;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 10;
}

• javascript
• jquery
• html
• css
• toggle

• Do you have a fiddle or online version? – Connor Commented Apr 20, 2012 at 23:56

1 Answer 1

Try this JSFiddle, please.

http://jsfiddle/WFxLJ/3/