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

[단계 1 - 영역 설정]>
일단 <div>는 "영역"을 의미합니다. 영역은 시작이 있으면, 반드시 영역의 끝도 명시해 주어야 합니다.
<div>특별한 영역</div> 의 형태를 지니게 되죠.

하지만 단순히 저 부분이 특별한 영역이라고 하기에는 <div>를 반복해서 사용할 경우 구분을 할 수 없게 됩니다.
그래서 각 부분에 이름을 지어주게 되는 것이죠. 이름은 이해를 돕기 위해 일단 id 라고 하겠습니다.

<div id="버튼A">여기에는 버튼 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.</div>
<div id="본문A">
여기는 본문 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.
/div 로 닫히기 전까지는 여러 줄의 텍스트가 들어갈 수도, 여러 개의 이미지가 들어갈 수도 있습니다.
/div 로 닫히기 전까지가 "본문 A의 영역"이니깐요.
</div>



[단계 2 - 동작 설정]
이 상태에서 접고 버튼 A를 누르면, 본문A 가 펼쳐지게 만들겠습니다.
그럼 '대상'에게 '행동'을 지시하면 됩니다. "본문 A는 접히거나 펼쳐져라" 라고 말이죠

인벤 스크립트는 접고 펼쳐지게 하는 명령어인 data-inven-toggle 명령어가 있습니다.
거기에 행동의 주체인 "본문A"를 지시해 주면 되는 것이죠

<div id="버튼A" data-inven-toggle="본문A">여기에는 버튼 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.</div>
<div id="본문A">
여기는 본문 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.
/div 로 닫히기 전까지는 여러 줄의 텍스트가 들어갈 수도, 여러 개의 이미지가 들어갈 수도 있습니다.
/div 로 닫히기 전까지가 "본문 A의 영역"이니깐요.
</div>



[단계 3 - 스타일 설정]
접고 펼치기는 되지만, 본문A가 처음 봤을 때 안보이다가 버튼을 눌렀을 때, 본문A가 보였으면 합니다.
즉 보이지 않게 하는 "스타일"을 추가해 주면 됩니다.

보이지 않게 하는 스타일은 style="display:none;" 입니다. 이건 "본문A" 라는 영역이 가지면 되는 스타일이죠.

<div id="버튼A" data-inven-toggle="본문A">여기에는 버튼 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.</div>
<div id="본문A" style="display:none;">
여기는 본문 A의 텍스트나 이미지가 들어가 있는 "영역" 입니다.
/div 로 닫히기 전까지는 여러 줄의 텍스트가 들어갈 수도, 여러 개의 이미지가 들어갈 수도 있습니다.
/div 로 닫히기 전까지가 "본문 A의 영역"이니깐요.
</div>



[단계 4 - 소스를 정리하고, 인벤 문법에 맞춰 수정하기]
- 인벤 스크립트에서 id는 data-inven-id 로 사용하고 있습니다.
- id는 영문, 숫자, 언더바(_)만 사용할 수 있습니다.
- 특별하지 않은 영역에는 굳이 id를 넣어줄 필요는 없습니다.
- <!-- 주석 -->을 넣어 주면 향후 편집에 도움이 됩니다.

<div data-inven-toggle="text_A">버튼</div>

<div data-inven-id="text_A" style="display:none;"><!-- 펼쳐지는 부분 시작 -->
정리된 내용.
<!-- 펼쳐지는 부분 종료 --></div>



[추가 - 본문을 눌러도 접히도록 만들기]
위에서 말했던 영역 개념이 잘 잡혀 있다면 손쉽게 "버튼 영역"을 본문 영역까지 포함해 버리면 됩니다.

<div data-inven-toggle="text_A">버튼           
<div data-inven-id="text_A" style="display:none;"><!-- 펼쳐지는 부분 시작 -->
정리된 내용.
<!-- 펼쳐지는 부분 종료 --></div></div>


아마도 문의하신 내용에 대한 답변이 되었을 것으로 생각됩니다만,
혹시 어려움이 있으시거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.

감사합니다.