07 Май
Необходимо, что бы при клике на ссылку попеременно раскрывался скрытый текст только этой ссылки, а на всех остальных ссылках раскрытый текст прятался.
Для реализации эффекта раскрывающегося текста при клике на ссылку потребуется достаточно простой Java-скрипт и немного HTML-разметки. В базовой реализации скрытый текст под ссылкой просто появляется, расталкивая текст ссылок выше и ниже, без каких-либо визуальных “украшений”.
Java-скрипт
Скрипт можно встроить прямо в сраницу, но лучше сохранить отдельно, назовем его unwrap_text.js
var show; function look(type){ param=document.getElementById(type); if(param.style.display == "none") { if(show) show.style.display = "none"; param.style.display = "block"; show = param; } else param.style.display = "none" }
HTML-разметка
<script src="js/unwrap_text.js"></script> <h3><a onclick="look('wrap_txt1'); return false;" href="#">Ссылочка 1</a></h3> <div id="wrap_txt1" style="display:none"> <p>Пример текста для блока 1 <p>Пример текста для блока 1 </div> <h3><a onclick="look('wrap_txt2'); return false;" href="#">Ссылочка 2</a></h3> <div id="wrap_txt2" style="display:none"> <p>Пример текста для блока 2 <p>Пример текста для блока 2 </div> <h3><a onclick="look('wrap_txt3'); return false;" href="#">Ссылочка 3</a></h3> <div id="wrap_txt3" style="display:none"> <p>Пример текста для блока 3 <p>Пример текста для блока 3 </div>
Теги <h3>
можно просто заменить на <div>
Оцените post
Просмотры: 1 952