라인 아코디언

<div class="krds-accordion type-line">
	<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>
  <div class="krds-accordion type-line">
	<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>