[기타] '수지'님이 문의하신 스크립트 입니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

문의하신 내용에 맞춰서 수정된 소스를 전달 드립니다.

1. 최초에 선택된 탭이 없도록 수정
탭 소스 중에 data-inven-tab-selected="none" 값을 추가

2. 탭 버튼을 다시 누를 경우, 탭이 접히도록 수정
탭 버튼 내에 data-inven-toggle 값을 추가해서, 버튼을 한 번 더 클릭할 경우 해당 탭이 닫히도록 수정
data-inven-selected-css 를 넣고 싶으신 경우는 소스를 크게 변경해야 하니, 원하시는 경우 말씀해 주세요.

3. 본문을 클릭하여도 탭이 접히도록
본문 영역을 감싸는 div 태그 속에도 data-inven-toggle 값을 추가하여, 본문 어디를 클릭해도 탭이 닫히도록 적용

4. 본문 닫기 버튼 추가
분문 영역 하단에 data-inven-toggle 을 추가해서 탭이 닫히는 샘플 버튼 추가 (B영역에만 추가)

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 점은 언제든지 글 남겨주세요.
감사합니다.


■ HTML을 누른 상태에서 붙여넣어 주세요.

---

<div data-inven-tabs data-inven-tab-selected="none">

<!-- 탭 버튼 부분 -->
<span data-inven-tab-for="A" data-inven-toggle="A"> 탭 버튼 A </span >
<span data-inven-tab-for="B" data-inven-toggle="B"> 탭 버튼 B </span >
<span data-inven-tab-for="C" data-inven-toggle="C"> 탭 버튼 C </span >

<div data-inven-tab-id="A" data-inven-id="A" style="display:none;" data-inven-toggle="A">
A 영역<br>
영역을 눌러도 닫히게 해 달라는 내용 때문에, 본문과 닫기 버튼의 기능의 동작이 같은 상태입니다.<br>
본문 영역을 눌렀을 때 닫히지 않게 하기 위해서 본문 영역에 포함된, data-inven-toggle 값을 지워주세요.
</div>

<div data-inven-tab-id="B" data-inven-id="B" style="display:none;">
B 영역
<div data-inven-toggle="B">닫기 버튼 샘플</div>
</div>

<div data-inven-tab-id="C" data-inven-id="C" style="display:none;" data-inven-toggle="C">
C 영역
</div>

</div>