как показать/скрыть текст?
к примеру:
есть строка с плюсиком, при кликани - плюсик раскрыается и появляется скрытй текст, второй клик - скрывает текст обратно.
есь аж два варианта кода = )
но как его прикрутить? (хочу использовать в материалах: клик по меню - открывается статья в тексте которой есть такие открывающиеся/скрывающиеся тексты)
<STYLE TYPE="text/css">
body {background:white}
.expandable {color:blue; cursor:hand; font-size:"12pt"}
.expanded {color:black; font-size:"12pt"}
.collapsed {display:none}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function outliner() {
var child =
document.all[event.srcElement.getAttribute("child",
false)];
if (null != child)
child.className = child.className == "collapsed" ?
"expanded" : "collapsed";
}
</SCRIPT>
<BODY ONCLICK="outliner();">
<H1 CLASS="expandable" child="info">
Click here for more information 1.
</H1>
<DIV ID="info" CLASS="collapsed">
tekst hiden 1
</DIV>
<H1 CLASS="expandable" child="info2">
Click here for more information 2.
</H1>
<DIV ID="info2" CLASS="collapsed">
tekst hiden 2
</DIV>
</BODY>
<script>
function hide1(){ window.div1.style.display= 'none';window.div2.style.display= 'block';}
function show1(){ window.div1.style.display= 'block';window.div2.style.display= 'none';}
function hide2(){ window.div3.style.display= 'none';window.div4.style.display= 'block';}
function show2(){ window.div3.style.display= 'block';window.div4.style.display= 'none';}
</script>
<div id=div1>
<p onclick=hide1() style="cursor:hand" class="pointer">111</p>
</div>
<div id=div2 style="display:none;">
<p onclick=show1() style="cursor:hand" class="pointer">111</p>
111+++</span>
</div>
<div id=div3>
<p onclick=hide2() style="cursor:hand" class="pointer">222</p>
</div>
<div id=div4 style="display:none;">
<p onclick=show2() style="cursor:hand" class="pointer">222</p>
222+++</span>
</div>
подскажите чего и как сделать?
спасибо