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

아코디언 본문

TIS_2017/응용sw_2기

아코디언

moozi 2017. 8. 11. 09:40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery - Accordion</title>
    <!-- jQuery ------------------------------------------->
    <script
    src="https://code.jquery.com/jquery-1.11.1.min.js"
    ></script>
    <style>
        .header{ 
            width:250px;
            height: 35px;  
            background-color: #dddddd;
        }
        .header span{padding: 5px;}
        .header:hover{
            background-color: #cccccc;
        }
        .content{  
            width:250px;
            height: 0px;
            background-color: #eeeeee;           
            overflow: hidden;
            transition: 0.3s;
        }
        .content p{padding: 5px;}
    </style>
    <script>
        $(document).ready(function(){
//            $(".header").click(function(){
//                if($(this).next().css("height")=="90px"){
//                    $(this).next().css("height","0px");
//                }else{
//                    $(this).next().css("height","90px");
//                }
//            });
           
            $(".header").eq(0).click(function(){
                if($(".content").eq(0).css("height")=="90px"){
                    $(".content").eq(0).css("height","0px");
                }else{
                    $(".content").eq(0).css("height","90px");
                }
            });
           
//            $(".header").each(function(index,item){
//                $(".header").eq(index).click(function(){
//                    if($(".content").eq(index).css("height")=="90px"){
//                        $(".content").eq(index).css("height","0px");
//                    }else{
//                        $(".content").eq(index).css("height","90px");
//                    } 
//                });
//            });
           
        });
    </script>
</head>

<body>
    <div id="accordion">
        <div class="header"><span>jQuery</span></div>
        <div class="content">
            <p>jQuery is javascript libray.</p>
        </div>
        <div class="header"><span>jQuery</span></div>
        <div class="content">
            <p>jQuery is javascript libray.</p>
        </div>
    </div>
   
</body>
</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

Bootstrap연습문제01  (0) 2017.08.16
jQuery연습문제02  (0) 2017.08.11
jQuery연습문제01  (0) 2017.08.10
javascript연습문제03  (0) 2017.08.09
8/29 join.html join2.html  (0) 2017.08.09
'TIS_2017/응용sw_2기' Related Articles more
Comments