* 첫번째 방법

<a class="more" onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'[닫기]':'[열기]';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';" href="javascript:void(0);" onfocus='blur()'>제목</a><div style="DISPLAY: none">내용</div>

<a onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';"href="javascript:void(0)">펼치기</a>

<div style="DISPLAY: none">내용

<a onclick="this.parentNode.style.display='none';" href="javascript:void(0)">접기</a>

</div>

* 두번째 방법

<div id="clasp_1" class="clasp"><a href="javascript:lunchboxOpen('1');">Open Lunchbox 1...</a></div>

<div id="lunch_1" class="lunchbox">This is lunchbox 1<br />Peanut Butter & Jelly<br />Potato Chips<br />Apple</div>

<div id="clasp_2" class="clasp"><a href="javascript:lunchboxOpen('2');">Open Lunchbox 2...</a></div>

<div id="lunch_2" class="lunchbox">This is lunchbox 2<br />Liverwurst (bleh!)<br />Twinkies<br />Fig Newtons</div>

//css//

..clasp {

text-align:center;

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

}

.lunchbox {

display:none;

} 

//스크립트//

<script type="text/javascript">

function lunchboxOpen(lunchID) {

document.getElementById('lunch_' + lunchID).style.display = "block";

document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:lunchboxClose('" + lunchID + "');\">Close Lunchbox " + lunchID + "...</a>";

}

function lunchboxClose(lunchID) {

document.getElementById('lunch_' + lunchID).style.display = "none";

document.getElementById('clasp_' + lunchID).innerHTML="<a href=\"javascript:lunchboxOpen('" + lunchID + "');\">Open Lunchbox " + lunchID + "...</a>";

} 

</script>

참고: http://www.brenz.net/snippets/open_close_div.asp

저작권자 : http://kasutera.tistory.com/45