JavaScript 접기 펼치기 (샘플 코드)

HTML의 <div> 요소 등을 접기 펼치기 하는 기능을 구현하는 순수한 JavaScript(바닐라 JS)로 작성된 샘플 코드입니다.

접히거나 펼쳐지는 움직임은 보통 목차, 더보기(Read More), FAQ(자주 묻는 질문과 그에 대한 답을 정리해 놓은 페이지) 등에서 자주 사용됩니다. 웹 브라우저라는 한정된 공간에서 우선 필요 없는 부분은 숨길 수 있어 웹 페이지를 보다 효율적으로 구성할 수 있습니다. 사용자의 필요에 따라 열고 닫을 수 있으면 되는 것입니다.

어렵지 않고 간단한 코드이지만, 막상 작성하려면 아무래도 조금 머리를 써야 하고 시간이 들기 마련입니다. 중요한 로직에만 집중하는게 효율적입니다. 본문의 샘플 코드를 참고하세요.

 

목차

• 펼치고 접기
• 여러 개를 펼치고 접기
• JavaScript 없이 펼치고 접기

펼치고 접기

[샘플 코드]

[코드 설명]

목차를 보이고 숨기는 기능입니다. 더보기(Read More) 기능 등에 응용할 수 있습니다. 그리고 보이기·숨기기 토글에서 가끔 <a href="javascript:함수명()"> 식으로 작성하는 경우가 있는데 HTML의 <a> 요소는 적절한 URL을 사용해서 이동하는 용도로만 사용하는 것이 올바르다고 합니다.

[실행 결과]

목차 [보이기]

1. HTML
2. CSS
3. JavaScript

여러 개를 펼치고 접기

[샘플 코드]

[코드 설명]

FAQ(Frequently Asked Questions, 자주 묻는 질문들) 페이지에서 흔히 볼 수 있는 여러 개를 각각 펼치고 접는 기능입니다. 여러 개를 동시에 모두 펼치고 접는 기능은 보통 없지만, 구현하려면 위 코드에서는 answer 클래스를 활용하면 됩니다.

[실행 결과]

자주 묻는 질문(FAQ)

하이퍼텍스트 마크업 언어(HyperText Markup Language)입니다.

캐스케이딩 스타일 시트(Cascading Style Sheets)입니다.

자바스크립트는 객체(Object)를 기초로 하는 스크립트 프로그래밍 언어입니다.

JavaScript 없이 펼치고 접기

[샘플 코드]

[코드 설명]

HTML의 <details>와 <summary> 요소로 JavaScript 없이 펼치고 접기가 가능합니다. 회전하면서 열림 또는 닫힘 상태를 나타내는 삼각형이 기본적으로 붙어 있습니다. 그리고 닫힌 상태가 기본입니다. 삼각형을 없애거나, 열린 상태를 기본으로 하려면 주석 처리된 부분을 확인하세요.

[실행 결과]

'XHTML'의 의미

XHTML(Extensible HyperText Markup Language)은 확장성이 있는 하이퍼텍스트 마크업 언어이다.