Слайд в/выпадающий заголовок div/показать частично скрытый div

Question

Буду признателен за помощь и понимание решения этой проблемы. Я разрабатываю веб-сайт с заголовком заголовка начальной видимой высоты 180 пикселей. Заголовок div равен 340px общей высоты. Когда пользователь нажимает на ссылку, мне нужно, чтобы заголовок div соскальзывал вниз, чтобы показать остальную часть (вверху). Итак, математически говоря, когда пользователь загружает страницу, будет отображаться нижний 180px из 340px-заголовка. Когда они нажимают на ссылку, остальная часть div скользит вниз, чтобы показать ее верхний 160 пикселей. Когда пользователь нажимает одну и ту же ссылку, заголовок div сместится, так что только нижний 180px отображается снова.

Я попытался заставить это работать, но не уверен, что я делаю неправильно. Мое первоначальное мышление состояло в том, чтобы использовать slideToggle() (hide/show), но я не могу заставить это работать. Другие в StackOverflow предлагают animate(), но я не знаю, как заставить это работать.

Я искал в StackOverflow и, похоже, нашел много вопросов относительно отображения и скрытия целого div, но проблема в том, что это полностью показывает и скрывает div. Мне нужно, чтобы мой div соскользнул вниз, чтобы открыть верхнюю скрытую часть, а затем вернуться обратно в исходное положение покоя (-160 пикселей вне экрана).

Любая помощь будет очень признательна! Я включил мой код стартера ниже:

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; 
} 

Answer 1

Попробуй этот JSFiddle, пожалуйста.

http://jsfiddle.net/WFxLJ/3/