티스토리 뷰

WEB/JavaScript

[JavaScript] 자주하는 질문 FAQ 아코디언 메뉴

silverline79 2026. 1. 3. 15:48

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>One-panel Accordion 실습</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background-color: #f4f7f6; }
        section { max-width: 600px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: #333; margin-bottom: 30px; }

        /* 아코디언 스타일 */
        .acc-item { border: 1px solid #eee; margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
        
        .acc-btn { 
            width: 100%; padding: 18px; text-align: left; background: #fff; 
            border: none; cursor: pointer; font-size: 16px; font-weight: 600;
            display: flex; justify-content: space-between; align-items: center;
            transition: background 0.3s;
        }
        
        .acc-btn:hover { background: #f0f7ff; }
        
        /* 활성화된 버튼 스타일 */
        .acc-btn.active { color: #007bff; background: #f0f7ff; }

        /* 화살표 아이콘 애니메이션 */
        .acc-btn::after { content: '▼'; font-size: 12px; transition: transform 0.3s; }
        .acc-btn.active::after { transform: rotate(180deg); }

        /* 컨텐츠 영역 */
        .acc-content { 
            max-height: 0; overflow: hidden; 
            transition: max-height 0.3s ease-in-out; 
            background: #fafafa; 
        }
        
        .acc-inner { padding: 20px; color: #666; border-top: 1px solid #eee; line-height: 1.6; }
    </style>
</head>
<body>

    <section>
        <h2>자주 묻는 질문 (FAQ)</h2>
        
        <div class="acc-item">
            <button class="acc-btn">Q1. 하나를 열면 다른 게 왜 닫히나요?</button>
            <div class="acc-content">
                <div class="acc-inner">사용자의 시선을 현재 클릭한 내용에 집중시키고, 페이지가 너무 길어지는 것을 방지하기 위한 UX 설계입니다.</div>
            </div>
        </div>

        <div class="acc-item">
            <button class="acc-btn">Q2. 어떤 원리로 작동하나요?</button>
            <div class="acc-content">
                <div class="acc-inner">새로운 패널을 열기 전에, <code>querySelectorAll</code>을 사용하여 이미 열려있는 모든 패널의 <code>maxHeight</code>를 0으로 강제 초기화합니다.</div>
            </div>
        </div>

        <div class="acc-item">
            <button class="acc-btn">Q3. 애니메이션 속도를 조절할 수 있나요?</button>
            <div class="acc-content">
                <div class="acc-inner">CSS의 <code>transition</code> 속성에서 0.3s 값을 변경하면 더 느리거나 빠르게 조절할 수 있습니다.</div>
            </div>
        </div>
    </section>

    <script>
        const accBtns = document.querySelectorAll('.acc-btn');
        const accContents = document.querySelectorAll('.acc-content');

        accBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const isActive = this.classList.contains('active');

                // [핵심 로직] 
                // 1. 모든 버튼에서 active 클래스 제거
                accBtns.forEach(b => b.classList.remove('active'));
                // 2. 모든 컨텐츠의 높이를 0으로 초기화 (다른 것 닫기)
                accContents.forEach(c => c.style.maxHeight = '0px');

                // 3. 내가 클릭한 게 이전에 닫혀있었다면 열기
                if (!isActive) {
                    this.classList.add('active');
                    content.style.maxHeight = content.scrollHeight + 'px';
                }
                // (이미 열려있었다면 위의 초기화 로직에 의해 닫힌 상태로 유지됨)
            });
        });
    </script>
</body>
</html>

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

원패널 아코디언.html
0.00MB

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] 비밀번호가 8자 이상이고 특수문자가 포함여부 체크하기  (0) 2026.01.03
[JavaScript] 이메일 형식 체크 정규표현식  (0) 2026.01.03
[JavaScript] 탭메뉴, 아코디언, 모달  (0) 2026.01.03
[JavaScript] 모달 팝업  (0) 2026.01.03
[JavaScript] 아코디언 코드  (0) 2026.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함