redwood_web_exercises/jquery_faq.html at master · CodeupClassroom/redwood_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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FAQS</title>
    <style>
        .invisible {
            display: none;
        }
    </style>
</head>
<body>

<div id="register" class="invisible">
    <h2>Register here</h2>
    <a href="#">Register</a>
</div>

<div>
    <h1>Would you like to sign up for our newsletter?</h1>
    <span id="close">X</span>
</div>

<h1>FAQ about national parks</h1>
<button id="showAnswers" href="">Show answers</button>

<dl>
    <dt> Can I drink alcohol in a state park?</dt>
    <dd class="invisible">It is against park rules to drink or display an alcoholic beverage in a public place at any
        time. All outdoor areas are public in a state park. Also, we cannot sell alcoholic beverages within a state
        park.
        <a href="">Refer to Texas State Park Regulations 59.134 (b). </a></dd>

    <dt>Can I ride my bike in state parks?</dt>
    <dd class="invisible">Almost all state parks offer road or mountain biking, or both! Many parks have long stretches
        of road (some winding and hilly). Many of our parks have multiuse trails. Visit our<a href=""> Biking page </a>for
        detailed information
    </dd>

    <dt>Where can I go birding? Do you have a bird checklist?</dt>
    <dd class="invisible">You can bird at any state park! For a short list of great parks for birding, visit our Birding
        page. See a complete list of Bird Checklists on our Publications page. You might want to check out the Great
        Texas Wildlife Trails, which list places to see wildlife around the state, including in state parks.
    </dd>

    <dt>Which state parks were built by the Civilian Conservation Corps (CCC)?</dt>
    <dd class="invisible"><a href="">Go to our <a href="">CCC web page</a> for more information. </a></dd>

    <dt>Can I bring my pet to a state park?</dt>
    <dd class="invisible">You can bring your pets to almost all state parks! However, we do have some rules:
        <ul>
            <li>Pets must be on leash, in a car, or in a crate at all times. The leash can be no longer than 6 feet.
            </li>
            <li>You must be with your pet at all times. You may not leave your pet unattended in the park, in a vehicle,
                or at your campsite.
            </li>
            <li>Do not bring a noisy or dangerous dog to a state park.</li>
            <li>Pets are not allowed in any state park buildings. This includes motels, cabins, screened shelters, group
                facilities and restrooms.
            </li>
        </ul>
    </dd>

    <dt>Can I fly a drone or other remote control aircraft in a state park?</dt>
    <dd class="invisible">Two parks offer zones for flying remote controlled aircraft (including drones): <a href="">Lake
        Whitney</a> and
        <a href="">San Angelo.</a> You can request a filming permit for your craft at any park by contacting that park.
        Allow several weeks for us to review your request.
    </dd>

    <dt> Is geocaching allowed in Texas State Parks?</dt>
    <dd class="invisible">Yes! Almost every state park has at least one geocache. Learn more about geocaching on our <a
            href="">Geocaching page.</a></dd>

    <dt>May I carry my handgun into a state park when I am traveling?</dt>
    <dd class="invisible">Our rules state that you may not show/display or fire your gun in a state park. If you have a
        valid Handgun License, you may carry your handgun in many state parks. But even with a HL, handguns are not
        allowed in parks that are leased from the federal government. Check with the park before you go. Refer to<a
                href="">Texas State Park Regulations for specific regulations - 59.134(d).</a></dd>

    <dt>Where can I find information on hiking at Texas State Parks?</dt>
    <dd class="invisible">You can hike at most state parks! Check out our <a href="">Hikes & Nature Walks page</a>
        for some ideas.
    </dd>
</dl>

<h3>Redwood National Park</h3>
<ul class="facts">
    <li>It has five visitor centers</li>
    <li>
        In 1978, the park's boundaries were substantially expanded, roughly doubling the size of the
        park
    </li>
    <li>It's one of America's smaller national parks</li>
    <li>It's home to more than 40 percent of the world's old-growth redwood trees</li>
</ul>

<h3>Pinnacles National Park</h3>
<ul class="facts">
    <li>
        It is believed that Native Americans inhabited California, and specifically Pinnacles
        National Park's region, for more than 10,000 years
    </li>
    <li>
        In 1908 President Theodore Roosevelt declared 2500 acres as Pinnacles National Monument.
    </li>
    <li>
        Pinnacles National Park was the 59th national park designated as such in the United
        States.
    </li>
    <li>There are more than 400 species of bees that can be found in Pinnacles National Park.</li>
</ul>


<h3>Niagara National Park</h3>
<ul class="facts">
    <li>Niagara Falls State Park stretches over 400 acres, with close to 140 acres of that under
        water.
    </li>
    <li>
        Frederick Law Olmsted was a visionary for Niagara Falls State Park. He also designed Central
        Park in New York City.
    </li>
    <li>
        Three Sisters Islands were named after the daughters of Parkhurst Whitney, a hotelman and
        prominent local citizen. The daughters names were Asenath, Angeline and Celinda Eliza.
    </li>
    <li>
        A statue of Chief Clinton Rickard, who was the founder of the Indian Defense League in 1926,
        can be found near the Great Lakes Gardens in Niagara Falls State Park.
    </li>
</ul>

<button id="highlight">Highlight</button>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script>
    "use strict";
    (function(){

        $("#showAnswers").click(function(event){
            $("dd").toggleClass("invisible");
        });

        $("dt").click(function(){
            // Just for fun
            //$("dt").css("background-color", "transparent");
            $(this).css("background-color", "yellow");
        });

        $("#highlight").on("click", highlightAllLastListItems);

        function highlightAllLastListItems () {
            // `this` is the DOM element
            // I want to apply the function `highlightLastListItem` to each `ul` element
            $('ul').each(highlightLastListItem);
        }

        function highlightLastListItem () {
            // `this` is each ul DOM element
            $(this)  // me
                .children()  // Select all my children elements
                .last()
                .css("background-color", "yellow")
            ;
        }

        $("h3").on("click", makeAllListItemsBold);

        function makeAllListItemsBold() {
            $(this)
                .next()  // ul
                .children() // li (optional, if you make the ul bold, all list items will be bold too)
                .css("font-weight", "bold")
            ;
        }

        $("li").on("click", makeFirstSiblingBlue);
        function makeFirstSiblingBlue() {
            $(this) // li
                .parent() // ul
                .children() // li (siblings)
                .first() // first list item
                .css("color", "blue")
            ;
        }

        $("#close").click(function(){
            $(this).parent().hide();
        });

        var facts = $(".facts");

        facts.hide();

        facts.prev().click(function () {
            $(this).next().slideToggle();
        });

        setTimeout(function(){
            $("#register").fadeIn();
        }, 8000);

    })();
</script>

</body>
</html>