[자바스크립트]간단한 감추기/펼치기 스크립트 (태터툴즈의 more 기능)|

이온디
2007년 12월 03일

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=euk-kr">
<script type="text/javascript" language="JavaScript">
function layer_toggle(obj) {
        if (obj.style.display == 'none') obj.style.display = 'block';
        else if (obj.style.display == 'block') obj.style.display = 'none';
}
</script>
<style>
.more {border:1px dotted #EFEFEF;margin:5px;background:#F9F9F9;}
.more p {margin:5px;}
</style>
</HEAD>
<BODY>

<div id=more01a style="DISPLAY: block">
  <A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#" >
  <p>더 보기..</p></A>
</div>

<div id=more01b style="DISPLAY: none">
  <A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#" >
  <p>닫기..</p></A>

  <DIV class="more"><P>div 사이에 이렇게 내용을 적어주시면 됩니다.</P>
<P>어머나 세상에</P>
<P>아니 이럴수가?</P></DIV>


</div>

<br><br>

<div id=more02a style="DISPLAY: block"><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#" ><p>이렇게 div id와 document.getElementById 값을 조절하면</p></A></div>
<div id=more02b style="DISPLAY: none"><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#" ><p>여러개를 열고 닫을 수 있습니다.</p></A><p>어렵지 않습니다.</p></div>

<br><br>

</BODY></HTML>