-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery_faq.html
79 lines (74 loc) · 2.83 KB
/
jquery_faq.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Estes National Park</title>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<style>
.invisible { visibility: hidden}
</style>
<h1>Estes Park Colorado</h1>
<dl>
<dt class="highlight"><strong>Where is Estes National Park located?</strong></dt>
<dd class="invisible">Located 90 miles northwest of Denver, Colorado. Sitting in the heart of the Rocky Mountains</dd>
<dt class="highlight"><strong>Are there bears in Estes Park?</strong></dt>
<dd class="invisible">Yes! the bear population is mostly active during summer and the fall season.</dd>
<dt class="highlight"><strong>Are there cabins available during the winter season?</strong></dt>
<dd class="invisible">Yes! We have many cabins available on a first come, first serve basis.</dd>
<dt class="highlight"><strong>Will there be medical services for emergencies?</strong></dt>
<dd class="invisible">Yes, medical services can called but due to the secluded nature of the park, medical services will be a fair distance away. We have on-site medical 24/7 but for emergencies do have helicopter capabilities.</dd>
<dt class="highlight"><strong>What activities does the park offer?</strong></dt>
<dd class="invisible">We offer horse-back mountain trail tours, fishing classes, and bison/elk viewing tours!</dd>
</dl>
<h3 class="header">Yellowstone National Park</h3>
<ul class="parks">
<li class="list">park facts</li>
<li>park facts</li>
<li>park facts</li>
<li>park facts</li>
</ul>
<h3 class="header">Yosemite National Park</h3>
<ul class="parks">
<li class="list">park facts</li>
<li>park facts</li>
<li>park facts</li>
<li>park facts</li>
</ul>
<h3 class="header">Grand Canyon National Park</h3>
<ul class="parks">
<li class="list">park facts</li>
<li>park facts</li>
<li>park facts</li>
<li>park facts</li>
</ul>
<script>
"use strict";
$(document).click(function(){
$('.invisible').toggleClass('invisible')
});
$(document).click(function(){
$('.highlight').css('background-color', 'yellow')
});
let parksBold = $('.header').click(function(){
$('.parks').children().css('font-weight', 'bold')});
parksBold();
$(document).click(function(){
$('li').first().css('color', 'blue')
});
// //var yellowButton = $('li').each(function(index){
// if(index === 3 || index === 7 || index === 11){
// $(this).css('background-color', 'yellow')
// }
// });
var beYellow = $('li').each(function(index){
if(index === 3 || index === 7 || index === 11){
$('this').css('background-color', 'yellow')
}
});
document.getElementById('clickNow').addEventListener('click', beYellow);
</script>
<button id="clickNow">Click Me!</button>
</body>
</html>