HTML+CSS+JavaScript

Добрый день, как сделать, чтобы по нажатию на какой-нибудь блок div снизу плавно выдвигался еще один блок с содержимым? И если еще раз нажать на первый div, чтоб нижний скрывался?
В интернете не мог найти примера, чтоб код посмотреть. Javascript вообще не знаю, надеюсь на готовый код :)

.slideToggle()

Спасибо! Вставил такой код

<script type="text/javascript">    $(document).ready(function(){    $("#button").click(function(){ $("#block").slideToggle(100)}); });                            </script>  <input id="button" type="button" value="Показать/Скрыть"> <div id="block"> Lorem Ipsum is simply dummy text of the printing and typesett ing industry. Lorem Ipsum has been the industry's standard dummy text ever s ince the 1500s, when an unknown print er took a galley of type and scrambled it to make a type spec imen book. It has survived not only five centuries, but also the leap into electronic typesetting, rema ining essentially unchanged. It was popularised in the 1960s with the  release of Letraset sheets containing Lorem Ipsum passag es, and more recently with desktop publishing software like Ald us PageMaker including versions of Lorem Ipsum. </div>

А вы не поможете изменить код, чтобы при загрузке страницы содержимое изначально было скрыто?

Зачем код, если существуют стили?
display:none;
Правда тут встает вопрос об индексации такого содержимого. Но есть и таблетка от этого, действие которой заключается в том, что стили скрываемых элементов применяются после загрузки страницы.

Спасибо!

<div id="block" style="display:none;"> Lorem Ipsum is simply dummy text of the pri </div>

я думал, что блок всегда будет теперь скрыт, но все равно он показывается по нажатию на кнопку, игнорирую display:none. Это такая фича?

Но есть и таблетка от этого, действие которой заключается в том, что стили скрываемых элементов применяются после загрузки страницы.

Индексация таких блоков не важна... то есть после того как страница полностью загрузилась и робот ее прочел, потом уже стили применять к таким блокам? А как если что проверить страницу на "загруженность" и потом только стили применять?

Хотя роботы вроде и так индексирует блоки с display:none?

Если бы js-сценарии игнорировали стили элемента (вернее вы бы об этом не беспокоились, создавая сценарий), то вы бы не увидели своего div. В jQuery практически все эффекты это всего лишь ссылки на низкоуровневый метод animate(), который может принимать большое число аргументов. Среди этих аргументов указываются и различные стили элементов, которые данный метод будет плавно изменять. Передача посредством метода slideToggle() методу animate() лишь ограниченное число аргументов (скорость анимации), совсем не означает, что данный метод будет заботить только скорость. Если бы обратное, то у вас бы происходило следующее:

<script type="text/javascript"> $(function(){   $("#button").click(function(){       $("#block")        .animate({height:'50px'},200,'linear',function(){            alert($(this).height())        });   }); });    </script>     <input id="button" type="button" value="Показать/Скрыть" />  <div id="block" style="width:300px;height:50px;background:#f00;display:none;"></div>

Как видите и высота у элемента есть, но вы его не видите, так как он так и остался невидим. А теперь перед запуском метода animate() добавьте такую строку:

.css({'height':'0','display':'block'})

Вот теперь все будет шоколадно. Вот тоже самое будет и при методе slideToggle() - jQuery изменит видимость элемента, а также установит стартовую ширину равную 0, чтобы впоследствии ее плавно увеличить до 50, если элемент скрыт, иначе наоборот. То есть метод slideToggle() будет проверять и состояние элемента, чтобы выполнить одно из действий - скрыть/показать. При этом не обязательно устанавливать стиль "скрытый" элементу, можно указать и высоту равную 0, мой ответ "display:none" был только лишь потому, что вы об этом спросили.

>А как если что проверить страницу на "загруженность" и потом только стили применять?
&
>Хотя роботы вроде и так индексирует блоки с display:none?

Вы пишите $(document).ready(function()..., а я использую $(function()..., но это одно и тоже, просто второе, это сокращенная запись первого, и обе эти записи означают, что код помещенный в них выполняется после того, как весь документ будет загружен. Это возможно потому, что после загрузки документа у тега body возникает событие onload(). То есть проверить страницу на "загруженность" не требуется, достаточно начинать действие по данному событию, что и описывают вышеприведенные строки.

Теперь о потом только стили применять. Конечно же - указать таковые в $(document).ready(function(). Но сперва их нужно прописать в css. Вот пример с вашим div.

<style> .hide #block {    display:none; } #block {    width: 300px;    height: 50px;    background: #f00; } </style> <div id="block"></div>

Выполните этот код - div будет виден. Теперь добавим сценарий, который будет выполняться после загрузки страницы:

$(function(){   $('html').addClass('hide'); });

DIV теперь не виден. Другими словами, пока поисковик рыщет по документу ему доступны все элементы, и он читает их содержимое (смысла нет роботу ковыряться среди того, что вы указываете скрытым), а как только документ будет загружен (робот уже насытился), скрытые элементы скрываются с глаз долой.

Спасибо большое за разжеванный ответ! В яваскрипт пока не углублялся и больше половины, что вы написали, я не вдуплил :) Главное что работает и хорошо!