Раскрытие при нажатии


Первый вариант:

<script type="text/javascript">
function showHide(type) {
  if ( document.getElementById(type).style.display == "block" )
    document.getElementById(type).style.display = "none";
  else
    document.getElementById(type).style.display = "block";
}
</script>
<p>
<span style="color:blue; text-decoration:underline; cursor:pointer" onclick="showHide('1');">Пешеходов надо любить. Пешеходы составляют большую часть человечества. Мало того - лучшую его часть. Пешеходы создали мир.</span>
</p>
<p id="1" style="display:none">
Это они построили города, возвели многоэтажные здания, провели канализацию и водопровод, замостили улицы и осветили их электрическими лампами. Это они распространили культуру по всему свету, изобрели книгопечатание, выдумали порох, перебросили мосты через реки, расшифровали египетские иероглифы, ввели в употребление безопасную бритву, уничтожили торговлю рабами и установили, что из бобов сои можно изготовить сто четырнадцать вкусных питательных блюд.
И когда все было готово, когда родная планета приняла сравнительно благоустроенный вид, появились автомобилисты.
</p>

<span style="color:blue; text-decoration:underline; cursor:pointer" onclick="showHide('2');">Вариант2</span>
</p>
<p id="2" style="display:none">
Это они построили города, возвели многоэтажные здания, провели канализацию и водопровод, замостили улицы и осветили их электрическими лампами. Это они распространили культуру по всему свету, изобрели книгопечатание, выдумали порох, перебросили мосты через реки, расшифровали египетские иероглифы, ввели в употребление безопасную бритву, уничтожили торговлю рабами и установили, что из бобов сои можно изготовить сто четырнадцать вкусных питательных блюд.
И когда все было готово, когда родная планета приняла сравнительно благоустроенный вид, появились автомобилисты.
</p>


ОБРАЗЕЦ:

Пешеходов надо любить. Пешеходы составляют большую часть человечества. Мало того - лучшую его часть. Пешеходы создали мир.

Вариант2


Второй вариант:
<script>
var show;
function hidetxt(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"
}
</script>
<div>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Ссылка 1</a>
<div style="display:none;" id="div1">
Много много много текста 1
</div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Ссылка 2</a>
<div style="display:none;" id="div2">
Много много много текста 2
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow">Ссылка 3</a>
<div style="display:none;" id="div3">
Много много много текста 3
</div>
</div>


ОБРАЗЕЦ:


Ссылка 1
Ссылка 2
Ссылка 3

Комментариев нет:

Отправить комментарий