html div 제목 클릭하여 접기 펼치기 (접었다 펴기 / Hide & Show)

안녕하세요. IT김군입니다.

보통 설명을 쓰거나 가이드 기능을 구현할 때 많이들 펼쳤다 접었다 하는 기능을 사용하시는데요.

html에서 제목을 누르면 내용이 펼쳐지고 다시 제목을 누르면 내용이 접히게 구현하는 소스는

<span id="test style="CURSOR: hand" onclick="if(plain.style.display=="none")
{plain.style.display=''; test.innerText = '➤ 누르면 접기'} else {plain.style.display = 'none';
test.innerText = '➤ 누르면 펼치기'}">➤ 누르면 펼치기</span>
<div id="plain" style="display: none"><HR>여기에 내용을 입력하시면 펼쳤을 시 표시됩니다.<HR></div>

위와 같이 소스를 입력하시면 아래와 같은 기능으로 구현됩니다.

아래 소스코드 하이라이트의 ➤ 누르면 펼치기를 클릭해보시면 기능을 보실 수 있습니다.

➤ 누르면 펼치기
여기에 내용을 입력하시면 펼쳤을 시 표시됩니다.

궁금하신 사항 있으시면 댓글주세요.

감사합니다.