Front/JS & jQuery

[js][bootstrap] collapse 적용하기

오선지♬ 2025. 2. 27. 13:59
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Collapse 예제</title>
    <!-- Bootstrap CSS 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <!-- 버튼 -->
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
        내용 보기 / 숨기기
    </button>

    <!-- 숨겨진 콘텐츠 -->
    <div class="collapse mt-3" id="collapseExample">
        <div class="card card-body">
            이 부분은 클릭하면 나타나고 다시 클릭하면 숨겨집니다.
        </div>
    </div>
</div>

<!-- Bootstrap JS 추가 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

2️⃣ 설명

  • data-bs-toggle="collapse":클릭하면 해당 요소의 collapse기능을 활성화합니다. => 헤드 설정
  • data-bs-target="#collapseExample": 숨기거나 참여대상 요소를 id입력합니다. => 숨기거나 표시할 body 의 id 작성
  • <div class="collapse" id="collapseExample">: 숨길 요소를 감싸는 것 div. => 숨기거나 표시할 body에 class 와 id 정하기
728x90
반응형
저작자표시 (새창열림)