codeup-web-exercises/jquery-play.html at master · liliwang1/codeup-web-exercises · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Fun</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
        .jumbotron {text-align: center;}
        .red {background-color: red;}
        .purple {background-color: mediumpurple;}
        .hidden {display:none;}

    </style>
</head>
<body>
<main class="container">
    <section class="jumbotron">
        <h1>Fun with jQuery!</h1>
        <button id="btn1" type="button" class="btn btn-default">#btn1</button>
        <button id="btn2" type="button" class="btn btn-default">#btn2</button>
        <button id="btn3" type="button" class="btn btn-default">#btn3</button>
        <button id="btn4" type="button" class="btn btn-default">#btn4</button>
    </section>
    <section class="col-xs-3">
        <article id="panel1" class="panel panel-primary">
            <div class="panel-heading">
                #panel1
            </div>
            <div class="panel-body"> Content
            </div>
        </article>
    </section>
    <section class="col-xs-3">
        <article id="panel2" class="panel panel-primary">
            <div class="panel-heading">
                #panel2
            </div>
            <div class="panel-body"> Content
            </div>
        </article>
    </section>
    <section class="col-xs-3">
        <article id="panel3" class="panel panel-primary">
            <div class="panel-heading">
                #panel3
            </div>
            <div class="panel-body"> Content
            </div>
        </article>
    </section>
    <section class="col-xs-3">
        <article id="panel4" class="panel panel-primary">
            <div class="panel-heading">
                #panel4
            </div>
            <div class="panel-body"> Content
            </div>
        </article>
    </section>
</main>
<!-- jQuery and bootstrap -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>

    $(document).ready(function(){

        $("#btn1").click(function(){
            $("#panel1").toggleClass("red");
        });
        $("#btn2").click(function(){
            $("#panel2").toggleClass("hidden");
        });
        $("#btn3").click(function(){
            $("#panel3").toggleClass("panel-danger");
        });

    });

</script>
</body>
</html>