자바스크립트 bootstrap5 아코디언 만들기 (accordion)

안녕하세요.

오늘은 자바스크립트 bootstrap5의 아코디언 기능 구현하는 방법을 포스팅하려고 합니다. 아코디언은 목록형 요소에 세부적인 내용을 포함시켜 접어두고 필요할 때 열어볼 수 있는 기능입니다. 아코디언 기능도 다른 기능들과 마찬가지로 활용도가 높기 때문에 예제를 보고 구현해 보는 것도 좋을 것 같습니다! 그럼 아코디언 기능은 어떤 식으로 구현이 되고 작동이 되는 것인지 예시 코드를 통해 확인해 보도록 하겠습니다.

Accordion 아코디언

목록형 DOM 영역에서 세부적인 내용을 포함시켜 접어두고 필요한 경우에 열어볼 수 있는 기능

1. Accordion 기본 사용 예시

<!doctype html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="accordion" id="accordionItem" style="width:300px;">
            <div class="accordion-item">
                <h2 class="accordion-header" id="accordionHeadOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionItemOne" aria-expanded="true" aria-controls="accordionItemOne">
                    Accordion Item #1
                </button>
                </h2>
                <div id="accordionItemOne" class="accordion-collapse collapse" aria-labelledby="accordionHeadOne" data-bs-parent="#accordionItem">
                    <div class="accordion-body">
                        안녕하세요. Accordion Item #1
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="accordionHeadTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionItemTwo" aria-expanded="false" aria-controls="accordionItemTwo">
                    Accordion Item #2
                </button>
                </h2>
                <div id="accordionItemTwo" class="accordion-collapse collapse" aria-labelledby="accordionHeadTwo" data-bs-parent="#accordionItem">
                    <div class="accordion-body">
                        안녕하세요. Accordion Item #2
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="accordionHeadThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionItemThree" aria-expanded="false" aria-controls="accordionItemThree">
                    Accordion Item #3
                </button>
                </h2>
                <div id="accordionItemThree" class="accordion-collapse collapse" aria-labelledby="accordionHeadThree" data-bs-parent="#accordionItem">
                    <div class="accordion-body">
                        안녕하세요. Accordion Item #3
                    </div>
                </div>
            </div>
        </div>
    </body>

    <style>
    body {
        width       : 300px;
        margin      : 0 auto;
        margin-top  : 20px;
    }
    </style>
</html>

accordion의 기본 예시 코드입니다. accordion dialog로 만들기 위해선 최상위 요소의 class에 "accordion"을 추가해 줍니다. 그러면 해당 요소는 accordion의 기능으로 세팅이 됩니다.

accordion의 하위 item을 작성하는 예시는 상세하게 보도록 하겠습니다.

<div class="accordion-item">
    <h2 class="accordion-header" id="accordionHeadOne">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionItemOne" aria-expanded="true" aria-controls="accordionItemOne">
        Accordion Item #1
    </button>
    </h2>
    <div id="accordionItemOne" class="accordion-collapse collapse" aria-labelledby="accordionHeadOne" data-bs-parent="#accordionItem">
        <div class="accordion-body">
            안녕하세요. Accordion Item #1
        </div>
    </div>
</div>

첫번째 item DOM 요소입니다.

item 요소 최상단 <div class="accordion-item"> 생성
header title 영역 id 생성 (body 영역의 aria-labelledby와 연동)
button 영역
- class="accordion-button collapsed" 추가 (아코디언 버튼 및 collapsed 적용)
- data-bs-toggle="collapse" 속성 추가
- data-bas-target="#..." 속성 추가 (body 영역의 id와 연동)
- aria-expanded="true" 속성 추가 (true: 활성화, false: 비활성화)
- aria-controls="..." 속성 추가 (body 영역의 id와 연동)
body 영역
- id="..." 추가 (button 영역과 연동)
- class="accordion-collapse collapse" class 추가
- aria-labelledby="..." 속성 추가 (header title 영역의 id와 연동)
- data-bs-parent"#..." 속성 추가 (아코디언 최상단의 id와 연동)

설정하는 부분이 헷갈릴 순 있지만 하나씩 설정하다 보면 의외로 간단합니다!

실행 결과

실행 결과를 보게 되면 item 목록의 요소별로 선택을 하게 되면 상세 내용이 접었다 펼쳐지게 됩니다.

2. 전체 펼치기

<div class="accordion-item">
    <h2 class="accordion-header" id="accordionHeadOne">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionItemOne" aria-expanded="true" aria-controls="accordionItemOne">
        Accordion Item #1
    </button>
    </h2>
    <div id="accordionItemOne" class="accordion-collapse collapse" aria-labelledby="accordionHeadOne">
        <div class="accordion-body">
            안녕하세요. Accordion Item #1
        </div>
    </div>
</div>

accordion의 기본 기능을 사용하다보면 선택한 item을 제외하고 나머지 item들은 비활성화 상태가 됩니다. 그런데 상황에 따라 다른 item을 선택하더라도 비활성화가 되지 않도록 해야 하는 경우가 있습니다. 그럴 땐 .accordion-collapse의 data-bs-parent 속성을 제거하면 됩니다. 해당 속성은 최상단의 부모 id와의 연동을 제거하면서 item들은 각자 컨트롤이 가능합니다. 결과 화면을 보도록 하겠습니다.

실행 결과

위의 실행 결과와 같이 item 서로 무관하게 움직이는 모습입니다.

마무리

오늘은 bootstrap5의 accordion 기능에 대해 알아봤습니다. UI상에서 사용할 땐 기능 구현이 어려워 보였지만 bootstrap이라는 멋진 라이브러리를 통해 이렇게 간단하게 기능 구현이 가능합니다! 요즘에는 한 페이지에서 많은 정보와 요소들을 보여주다 보면 부분 부분 숨겨주는 효과가 많이 들어가게 됩니다. 오늘 알아본 accordion 또한 포함이 되는 부분입니다. 앞으로도 계속 정보와 데이터는 많아질 것이고 frontend를 다루는 분들은 이런 기능들을 계속 라이브러리를 통해 구현이 될 것 같습니다. 새로운 기능이 나올 때마다 부지런히 정리해서 포스팅해야겠습니다. :)

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

저작자표시 비영리 변경금지 (새창열림)

'javascript > javascript' 카테고리의 다른 글

자바스크립트 bootstrap5 tooltip (툴팁) 만들기 (0)	2023.02.04
자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) (0)	2023.02.03
자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스) (0)	2023.02.02
자바스크립트 bootstrap 5 경고창 만들기 (0)	2023.02.01
자바스크립트 split 문자열 자르는 방법과 활용 (0)	2023.01.31

자바스크립트 bootstrap5 아코디언 만들기 (accordion)

1. Accordion 기본 사용 예시

2. 전체 펼치기

마무리

'javascript > javascript' 카테고리의 다른 글

관련글

티스토리툴바