스크립트로 DIV안의 내용 숨기고 보이기

열기

닫기

 

숨기고 보이기 테스트



 

■ 숨기고 보이기 소스

<pre>

<SPAN id=btnhead0>
    <A href="javascript:moreOpen();">
        <B>열기</B>
    </A>
</SPAN>
<SPAN id=btntail0 style="DISPLAY: none">
    <A href="javascript:moreClose();">
        <B>닫기</B>
    </A>
</SPAN>

<DIV id=moretail0 style="DISPLAY: none">
    <br />숨기고 보이기 테스트<br />
</DIV>

<SCRIPT>
    function moreOpen(){document.all.btnhead0.style.display='none';  
    document.all.btntail0.style.display='';
    document.all.moretail0.innerHTML=document.all.moretail0.innerHTML;
    document.all.moretail0.style.display='';}
</SCRIPT>

<SCRIPT>
    function moreClose(){document.all.btnhead0.style.display='';
    document.all.btntail0.style.display='none';
    document.all.moretail0.style.display='none';}
</SCRIPT>

</pre>

파랑색을 누르면 빨강색 부분의 내용이 보여지고
녹색을 누르면 빨강색 부분의 내용이 없어진다.