Раскрывающийся текст при клике

Код кнопки

Пример работы

<script>

 function collapsElement(id) {

 if ( document.getElementById(id).style.display != "none" ) {

 document.getElementById(id).style.display = 'none';

 }

 else {

 document.getElementById(id).style.display = '';

 }

 }

 </script>

<div><a href="javascript:collapsElement('identifikator')" title="" rel="nofollow">Текст ссылки</a>

<div id="identifikator" style="display: none">

<p>Текст текст текст текст</p>

</div>

</div>

Текст ссылки

<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

<script>function showTooltip()

{

var myDiv = document.getElementById('tooltip');

var myLink = document.getElementById('link');

if(myDiv.style.display == 'none'){

myDiv.style.display = 'block';

myLink.style.display = 'none';

} else {

myDiv.style.display = 'none';

}

return false;

}</script>

<a href='javascript:;' onclick=showTooltip() id="link"> Показать </a>

<div id=tooltip style='display: none'>

Тут текст фыва фыва фыва

</div>

Показать

<div><a href="#open1" onclick="show('hidden_1',200,5)">Ссылка 1</a></div>

<div id=hidden_1 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>

<div><a href="#open2" onclick="show('hidden_2',200,3)">Ссылка 2</a></div>

<div id=hidden_2 style="display:none;height:200px;width:350px;background-color:#f0f0f0"> Тут вводим текст. </div>

<script language="JavaScript" type="text/javascript">

/*<![CDATA[*/ var s=[],s_timer=[]; function show(id,h,spd) { s[id]= s[id]==spd? -spd : spd; s_timer[id]=setTimeout(function() { var obj=document.getElementById(id);

if(obj.offsetHeight+s[id]>=h){obj.style.height=h+"px";

obj.style.overflow="auto";} else if(obj.offsetHeight+s[id]<=0){obj.style.height=0+"px";

obj.style.display="none";} else {obj.style.height=(obj.offsetHeight+s[id])+"px";

obj.style.overflow="hidden"; obj.style.display="block";

setTimeout(arguments.callee, 10); } }, 10); } /*]]>*/ </script>

<input type="submit" onclick="$('div.nagato').toggle('normal');" value="раскрыть текст">

<div class="nagato" style="display:none;">Здесь текст, но сюда так же можно поставить любой скрипт или плеер...</div>

 

Вместо input можно так же использовать div, button, <a href="#">

23.01.2013
Просмотров (33079)
Яндекс.Метрика
© Copyright 2013 - 2017 Уроки Fo.Ru