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
반응형
'Front > JS & jQuery' 카테고리의 다른 글
| [js] 옵셔널 체이닝을 활용한 forEach()적용 (0) | 2025.03.01 |
|---|---|
| [js] 옵셔널 체이닝 (.?) (0) | 2025.02.28 |
| [js] $div.data(item) (0) | 2025.02.26 |
| [js][datatables] 엑셀 변환 시 html코드 처리 (0) | 2025.02.23 |
| [js] 속성이 포함된 태그의 정규식 변환 (0) | 2025.02.22 |