vue3 스크립트 질문입니다~

원하는 기능은 로드할 땐 다 펼쳐져 있고 클릭하면 접히고 다시 클릭하면 열리는 구조입니다~

하나를 열면 다른 건 접히지는 않는 기능으로 가려합니다

열고 접는 원리는 단순하게 클래스를 토글하는 방식으로 가려고 합니다

html 구조는 대충 이런 상태입니다

(피지알 에디터는 꺽쇠 작성이 안 먹혀서 대괄호로 대체하고 들여쓰기도 제대로 안 되니 양해 부탁드립니다~ )

//주석: 열렸을 땐 클래스 is-folded 제거
[div class="acco"]
[button type="button" class="btn"]열기/닫기[/button]
[div class="acco-content"]
아코디언 컨텐츠1
[/div]
[/div]

//주석: 접혔을 땐 클래스 is-folded 추가
[div class="acco is-folded"]
[button type="button" class="btn"]열기/닫기[/button]
[div class="acco-content"]
아코디언 컨텐츠2
[/div]
[/div]




-----------------------------------

하려는 작업 방향은 하나를 열면 다른 건 그대로인 기능을 가려고 하는데

질문 하는 김에 추가 질문 드리면

하나 열면 다른 것들은 접히는 기능인 경우는 스크립트를 어떻게 짜야할지도 궁금합니다~!! :)