아코디언

접힘/펼침 패널 컴포넌트입니다.

#accordion #collapse #expand

아코디언 내용 영역

HTML

<div class="krds-accordion">
	<div class="accordion-item">
		<h5 class="accordion-header"><button type="button" id="accordionHeaderSample01" class="btn-accordion" aria-controls="accordionCollapseSample01">아코디언 타이틀 영역</button></h5>
		<div id="accordionCollapseSample01" class="accordion-collapse collapse" aria-labelledby="accordionHeaderSample01">
			<div class="accordion-body">
				
				아코디언 내용 영역
				
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h5 class="accordion-header"><button type="button" id="accordionHeaderSample02" class="btn-accordion" aria-controls="accordionCollapseSample02">아코디언 타이틀 영역</button></h5>
		<div id="accordionCollapseSample02" class="accordion-collapse collapse" aria-labelledby="accordionHeaderSample02">
			<div class="accordion-body">
				
				아코디언 내용 영역
				
			</div>
		</div>
	</div>
</div>

Vue 컴포넌트

<template>
  <div class="krds-accordion">
	<div class="accordion-item">
		<h5 class="accordion-header"><button type="button" id="accordionHeaderSample01" class="btn-accordion" aria-controls="accordionCollapseSample01">아코디언 타이틀 영역</button></h5>
		<div id="accordionCollapseSample01" class="accordion-collapse collapse" aria-labelledby="accordionHeaderSample01">
			<div class="accordion-body">
				
				아코디언 내용 영역
				
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h5 class="accordion-header"><button type="button" id="accordionHeaderSample02" class="btn-accordion" aria-controls="accordionCollapseSample02">아코디언 타이틀 영역</button></h5>
		<div id="accordionCollapseSample02" class="accordion-collapse collapse" aria-labelledby="accordionHeaderSample02">
			<div class="accordion-body">
				
				아코디언 내용 영역
				
			</div>
		</div>
	</div>
</div>
</template>

<script setup lang="ts">
// 아코디언 컴포넌트
// 접힘/펼침 패널 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명: accordion.html
카테고리: 표시
난이도: 보통