• 목록

<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:white; 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; }
 .zebra-color { background-color: #f0f0f5;}
 
 
 .tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

</style>
 
 
<div id=toggleDiv_1>
    <div class="toggle-title zebra-color" 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 zebra-color">비트겐슈타인 [3] : 1938 ~ 1951</div>
    <div class=toggle-body>
        1938 케임브리지 대학에서 철학을 가르침. 영국으로 귀화. 이 시기의 강의가 『미학, 심리학, 종교적 믿음에 관한 강의의 대화』(1966)란 이름으로 사후 출판
    </div>
</div>
 <br>
 
<div id=toggleDiv_3>
    <div class=toggle-title style=margin-top:0px>대한민국에 대해서 알아보아요</div>
    <div class=toggle-body>
    <h3 id=h3k>대한민국의 국체는?</h3>
       
        <div class="tooltip">1. 민주공화국이다.
          <span class="tooltiptext">이것이 정답입니다. 헌법1조에 대한민국은 민주공화국이다 라고 나옵니다. </span>
        </div>       
        <p clsss=pk>2. 독재 공화국이다</p>
        <p clsss=pk>3. 개인 공화국이다</p>
        <p clsss=pk>4. 김씨 공화국이다</p>
   
   
   
    </div>
 <div class=toggle-title>수능시험에 대해서 알아보아요</div>
    <div class=toggle-body>
      <h3 id=h3k>수학능력시험이란?</h3>
   
      <p clsss=pk>1. 중학교 입학시험이다.</p>
        <p clsss=pk>2. 고등학교 입학시험이다.</p>
        <p clsss=pk>3. 유치원 입학시험이다.</p>
   
        <div class="tooltip">4. 대학교 입학시험이다.
          <span class="tooltiptext">이것이 정답입니다. 대학에 들어가서 대학교육을 정상적으로 받을수 있는지 검증하는 시험입니다. </span>
        </div>   
 
    </div>
 
 
  <div class=toggle-title>그누보드에 대해서 알아보아요</div>
    <div class=toggle-body>
      <h3 id=h3k>그누보드란?</h3>
   
      <p clsss=pk>1. 일본프로그램이다.</p>
        <p clsss=pk>2. 회계프로그램이다.</p>
        <p clsss=pk>3. 설계프로그램이다.</p>
   
        <div class="tooltip">4. 한국의 대표적인 CMS이다.
          <span class="tooltiptext">이것이 정답입니다. 대한민국의 대표적인 콘텐츠관리프로그램입니다. </span>
        </div>   
 
    </div>
</div>
 
<div id=toggleDiv_2 style=margin-top:30px>
    <div class="toggle-title zebra-color" 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 zebra-color">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 zebra-color">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 < parent["toggle_" + toggle[0]]._body.length; tb++) {
                if (parent["toggle_" + toggle[0]]._style) parent["toggle_" + toggle[0]]._body[this.tt].style.display = parent["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                else {
                    if (tb == this.tt) parent["toggle_" + toggle[0]]._body[this.tt].style.display = parent["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
                    else parent["toggle_" + toggle[0]]._body[tb].style.display = "none";
                }
            }
        }
    }
}
toggleMode("toggleDiv_1", 1);
toggleMode("toggleDiv_2", 0);
toggleMode("toggleDiv_3", 0);
///////////////////////////////////////////////////

</script>