[잡담] 두가지 인장을 전환하는 버튼 만들기

<div style="cursor: pointer;" onClick="var a=document.getElementById('meu_inven_a');var b=document.getElementById('meu_inven_b');if(a.style.display=='none'){a.style.display='block';b.style.display='none';}else{a.style.display='none';b.style.display='block';}">

인장 전환 버튼

</div>

<div id="meu_inven_a">

첫번째 인장

</div>

<div id="meu_inven_b" style="display: none;">

두번째 인장

</div>

인장 전환 버튼, 첫번째 인장, 두번째 인장에는 원하시는 내용, 태그를 넣으시면 됩니다.

원리는 간단히 설명하자면 인장 접기 두개를 합쳤다고 생각하시면 됩니다.

접기버튼A <-- 누르면 접힌인장A가 펼쳐졌다 접혔다 합니다.

접힌인장A

접기버튼B <-- 누르면 접힌인장B가 펼쳐졌다 접혔다 합니다.

접힌인장B

이 상태에서 접기버튼A의 액션(onclick)에 접기버튼B의 액션(onclick)을 적절히 섞어 합쳐주고,

접힌 인장B를 처음에 접힌(안보이는)상태로 만들어두는 것과 같은 개념입니다.

▼ 미리보기

인장 전환 버튼

첫번째 인장

두번째 인장

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