멀티 접었다 폈다 하기!

샘플예제 - http://www.mediaplayer.kr/main/tip/55

https://sir.kr/qa/461937 - 질문글도 있고 해서 함수를 하나 만들어 보았습니다.

이건 .toggle-title 과 .toggle-body 라는 클래스를 물고 늘어져서 만든 것입니다.

아래처럼 코드를 사용하면 되구요.

 

<div id=아이디>

    <div class=toggle-title>제목1</div>

    <div class=toggle-body>내용1</div>

    <div class=toggle-title>제목2</div>

    <div class=toggle-body>내용2</div>

    <div class=toggle-title>제목3</div>

    <div class=toggle-body>내용3</div>

    <div class=toggle-title>제목4</div>

    <div class=toggle-body>내용4</div>

</div> 

 

자바스크립트 가장 하단부에

 

toggleMode("아이디", 1);

로 표현시켜 주세요.

1. 아이디 갯수는 몇개라도 상관이 없습니다. 물론 각개의 아이디는 문자가 달라야 합니다.

2. 태그에서 아이디는 띄워쓰기가 없는 경우 따옴표를 생략해도 되지만 자바스크립트의 함수에서는 반드시 따옴표를 줘야 합니다.

3. 두번째 매개변수는 1과 0 이 있는데 예제 링크에서 1번과 0번은 형태가 다릅니다.

1번은 본인만 접었다 폈다 하는 형태이고 0번은 전체를 접으면서 본인만 열리는 일종의 아코디온 식입니다.

 

----------

 

<style>
.toggle-title { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; text-align:center; font-weight:bold; cursor:pointer; background-color:#eeeeee; margin-top:5px; }
.toggle-body { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; background-color:#ffffff; border-top:none; display:none; }
</style>
<div id=toggleDiv_1>
    <div class=toggle-title style=margin-top:0px>비트겐슈타인 [1] : 1889 ~ 1918</div>
    <div class=toggle-body>
        1889년 비엔나에서 오스트리아의 거대한 강철 회사 주인의 5남 3녀의 막내아들로 출생.
    </div>
    <div class=toggle-title>비트겐슈타인 [2] : 1919 ~ 1936</div>
    <div class=toggle-body>
        1919 거액의 유산을 포기하고 학교 선생이 되기 위해 교사양성교육 과정에 등록
    </div>
    <div class=toggle-title>비트겐슈타인 [3] : 1938 ~ 1951</div>
    <div class=toggle-body>
        1938 케임브리지 대학에서 철학을 가르침. 영국으로 귀화. 이 시기의 강의가 『미학, 심리학, 종교적 믿음에 관한 강의의 대화』(1966)란 이름으로 사후 출판
    </div>
</div>
<div id=toggleDiv_2 style=margin-top:30px>
    <div class=toggle-title style=margin-top:0px>GIRL [1]</div>
    <div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/uUNEr/btrynhBrJMz/0UkzK1q9qYZgdnNddSeCH0/img.jpg></div>
    <div class=toggle-title>GIRL [2]</div>
    <div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/uzivd/btrymi1GOBC/Jw0i2stTZ5QjIdbhCZ3Slk/img.jpg></div>
    <div class=toggle-title>GIRL [3]</div>
    <div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/d8q9Gi/btryn9JUK5w/MHLQDcAwUbvPAolHGdvuTK/img.jpg></div>
    <div class=toggle-title>GIRL [4]</div>
    <div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/cBci8P/btryjEEoxBt/BmR5AU3KnSNTAgsALg6CcK/img.jpg></div>
    <div class=toggle-title>GIRL [5]</div>
    <div class=toggle-body><img style=width:100% src=https://blog.kakaocdn.net/dn/VIqgX/btryoZAiE4H/R0DikovgINDXvMlua1Difk/img.jpg></div>
</div>
<script>
function toggleMode(...toggle) {
    this["toggle_" + toggle[0]] = this[toggle[0]];
    this["toggle_" + toggle[0]]._style = toggle[1];
    this["toggle_" + toggle[0]]._title = this["toggle_" + toggle[0]].querySelectorAll(".toggle-title");
    this["toggle_" + toggle[0]]._body = this["toggle_" + toggle[0]].querySelectorAll(".toggle-body");
    for (tt = 0; tt < this["toggle_" + toggle[0]]._title.length; tt++) {
        this["toggle_" + toggle[0]]._title[tt].tt = tt;
        this["toggle_" + toggle[0]]._title[tt].onclick = function() {
            for (tb = 0; tb < window["toggle_" + toggle[0]]._body.length; tb++) {
                if (window["toggle_" + toggle[0]]._style) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                else {
                    if (tb == this.tt) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                    else window["toggle_" + toggle[0]]._body[tb].style.display = "none";
                }
            }
        }
    }
}
toggleMode("toggleDiv_1", 1);
toggleMode("toggleDiv_2", 0);
</script>