html 페이지 접기, 펴기

아래소스처럼 응용하세요 div id=를 추가하면 무한으로도 사용하실 수 있습니다.

more01,02,03 계속해서 div id를 늘려주시면 무제한으로 응용도 가능합니다.

<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>

<div id=more01a style=display:block>

    <p>

        <a href=# onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;">숨겨져있습니다.[보시려면 클릭하세요!]</a></p></div>
        <div id=more01b style=display:none ><p><a href=# onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;">보여지고있습니다.[닫으시려면 클릭하세요!]</a>

    </p>

    <p>이곳에 내용이 들어가겠죠?

    </p>

</div>

<br><br>

<div id=more02a style=display:block><p><a href=# onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;">또 숨겨져있습니다.[보시려면 클릭하세요!]</a></p></div>
<div id=more02b style=display:none ><p><a href=# onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;">또 보여지고있습니다.[보시려면 클릭하세요!]</a></p><p>보여지고있습니다.[닫으려면 클릭하세요!]</p></div>