인벤 스크립트에 관심을 가져주셔서 감사합니다.
우선 "접고 펼치는 기본 폼"에 대해서 이해만 해 주시면,
그 뒤로는 해당 폼의 "반복" 사용만 해 주시면 됩니다.
이해를 위해 접고 펼치는 각 영역을 A, B, C, D로 하겠습니다.
<div data-inven-toggle="A"> A 버튼 </div>
<div data-inven-id="A" style="display:none;">A 영역</div>
각각의 의미를 살펴보면,
data-inven-toggle : 뒤에 적혀 있는 대상에게 접히고 펼쳐지라는 명령을 합니다.
data-inven-id : 대상의 이름을 정해 줍니다.
style="display:none;" : '처음에는 보이지 않게' 하는 스타일 입니다.
그럼 대상의 이름만 B, C, D로 바꿔 주면, 접고 펼치는 기능을 4개를 만들 수 있습니다.
<div data-inven-toggle="A"> A 버튼 </div>
<div data-inven-id="A" style="display:none;">A 영역</div>
<div data-inven-toggle="B"> B 버튼 </div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-toggle="C"> C 버튼 </div>
<div data-inven-id="C" style="display:none;">C 영역</div>
<div data-inven-toggle="D"> D 버튼 </div>
<div data-inven-id="D" style="display:none;">D 영역</div>
다음으로 해 주실 것은 "위치만 조절"해 주시면 원하시는 폼이 나옵니다.
일단 간략하게, A영역 속에 B 버튼을 넣어 보겠습니다.
→ A 버튼을 클릭하면, B 버튼이 등장하고 B버튼을 클릭하면 B 영역이 나오게.
<div data-inven-toggle="A"> A 버튼 </div>
<div data-inven-id="A" style="display:none;">A 영역
<div data-inven-toggle="B"> B 버튼 </div>
<div data-inven-id="B" style="display:none;">B 영역</div>
</div>
오직 영역을 나타내는 <div>와 </div> 안쪽에,
다른 내용을 통째로 옮기면 끝납니다.
B 영역을 감싸고 있는 <div>와 </div>를 A버튼 위로 옮기면, B버튼을 클릭 했을 때, A버튼 위에 B의 내용이 뜨게 할 수도 있습니다.
이번에는 요청하신 내용과 같이,
A버튼을 클릭하면, A영역 속에 있던, B버튼과 C 버튼이 나오고
C버튼을 클릭하면, D 버튼이 등장하기까지 작성해 보겠습니다. 역시 위치만 옮겨 주시면 됩니다.
<div data-inven-toggle="A"> A 버튼 </div>
<div data-inven-id="A" style="display:none;">A 영역
<div data-inven-toggle="B"> B 버튼 </div>
<div data-inven-id="B" style="display:none;">B 영역</div>
<div data-inven-toggle="C"> C 버튼 </div>
<div data-inven-id="C" style="display:none;">C 영역
<div data-inven-toggle="D"> D 버튼 </div>
<div data-inven-id="D" style="display:none;">D 영역</div>
</div>
</div>
이 내용을 조금만 응용해 주시면, 원하시는 만큼 접고 펼치는 기능을 추가할 수 있습니다.
toggle 명령은 동시에 여러 대상에게 전달 할 할 수도 있어, 아래와 같이 이렇게 응용할 수도 있습니다.
A버튼 클릭시, A버튼이 사라지고, B버튼을 표시
B버튼 클릭시, B버튼이 사라지고, C버튼을 표시
C버튼 클릭시, C버튼이 사라지고, A버튼을 표시
<div data-inven-toggle="A,B" data-inven-id="A"> A 버튼 </div>
<div data-inven-toggle="B,C" data-inven-id="B" style="display:none;"> B 버튼 </div>
<div data-inven-toggle="A,C" data-inven-id="C" style="display:none;"> C 버튼 </div>
혹시 이해가 어려우신 부분이 있거나, 원하시는 형태를 구현하시기 어려우신 경우
그리고 이외에도 궁금하신 내용이 있다면 언제든지 글 남겨주세요.
감사합니다.
Nacx
Nacx
