Страница 1 из 1

Выпадающий текст по ссылке

СообщениеДобавлено: Ср окт 21, 2009 13:02
Bogachev
Друзья, подскажите как сделать так чтоб при нажатии на ссылку выпадал (открывался) под ней текст/картинки. А при повторном сворачивался (закрывался) обратно?

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

Re: Выпадающий текст по ссылке

СообщениеДобавлено: Ср окт 21, 2009 20:07
Jedi
Код: Выделить всё
<script>
function ShowHide(id)
{
el = document.getElementById(id);
if(el.style.display=="none")
{
el.style.display="block";
}
else
{
el.style.display="none";
}
}
</script>
<a href="#" onClick="ShowHide(1)">Link 1</a>
<div id="1" style="display: none;">Скрытый текст</div>
<a href="#" onClick="ShowHide(2)">Link 2</a>
<div id="2" style="display: none;">Скрытый текст</div>

Re: Выпадающий текст по ссылке

СообщениеДобавлено: Ср окт 21, 2009 20:35
Bogachev
Ой, а можно на примере где что вставлять?

Re: Выпадающий текст по ссылке

СообщениеДобавлено: Чт окт 22, 2009 15:24
Jedi
ну вот у тебя идет текст
<a href="#" onClick="ShowHide(1)">ГЛАВА 1</a>
<div id="1" style="display: none;">ТЕКСТ ГЛАВЫ 1</div>

<a href="#" onClick="ShowHide(id2)">ГЛАВА 2</a>
<div id="id2" style="display: none;">ТЕКСТ ГЛАВЫ 2</div>

Изначально у тебя текст главы скрыт. При нажатии на ссылку, запускается яваскрипт, который проверяет показывается текст или нет, и если он скрыт, то открывает его и наоборот.
Текст находится в диве имеющим определённый ID. а при нажатии на ссылку запускается функция в которую передаётся ID того дива который ты хочешь скрыть или показать.