Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

accordion.html 본문

TIS_2016/HTML5_3기

accordion.html

moozi 2016. 8. 12. 13:33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordion</title>
    <style>
        button.accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
        }
       
        button.accordion.active, button.accordion:hover {
            background-color: #ddd;
        }
       
/*
        div.panel {
            padding: 0 18px;
            background-color: white;
            display: none;
        }

        div.panel.show {
            display: block;
        }
*/
       
        div.panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 0;
        }

        div.panel.show {
            opacity: 1;
            max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
        }

        button.accordion:after {
            content: '\02795'; /* Unicode character for "plus" sign (+) */
            font-size: 13px;
            color: #777;
            float: right;
            margin-left: 5px;
        }

         button.accordion.active:after {
            content: "\2796"; /* Unicode character for "minus" sign (-) */
        }
    </style>
</head>
<body>
    <button class="accordion">HTML5</button>
    <div class="panel">
    <p>HTML5</p>
    </div>

    <button class="accordion">CSS3</button>
    <div class="panel">
    <p>Lorem ipsum...</p>
    </div>

    <button class="accordion">Javascript</button>
    <div class="panel">
    <p>Lorem ipsum...</p>
    </div>
   
    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function(){
            //이미 열려있는 항목 닫기.
            for(j=0;j<acc.length;j++){
                acc[j].classList.remove("active");
                acc[j].nextElementSibling.classList.remove("show");
            }
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
      }
    }
    </script>

</body>
</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

suggestion json  (0) 2016.08.16
modal.html, loader.html  (0) 2016.08.12
grid.html  (0) 2016.08.12
datepicker  (0) 2016.08.12
ajax연습문제04  (0) 2016.08.11
'TIS_2016/HTML5_3기' Related Articles more
Comments