codeup-web-exercises/jquery-faq.html at main · Dfarias1/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
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Attributes and CSS Jquery</title>
    <style>
        .invisible {
            visibility: hidden;
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        .bold-text {
            font-weight: bold;
        }
        .first-item-highlight {
            color: blue;
        }
    </style>
</head>
<body>

<dl>
    <dt>Alcatraz Island</dt>
    <dd class="invisible">Did those guys actually survive the escape?</dd>

    <dt>American Memorial Park</dt>
    <dd class="invisible">What does this park memorlize?</dd>

    <dt>Badlands National park</dt>
    <dd class="invisible">Why is it called "Badlands"?</dd>

    <dt>Blackwell School National Historic Site</dt>
    <dd class="invisible">Was this school in Texas?</dd>

    <dt>Buffalo National River</dt>
    <dd class="invisible">Can you go down the river in a kayak?</dd>

    <dt>Cape Cod National Seashore</dt>
    <dd class="invisible">Is the beach clean?</dd>

    <dt>Constitution Gardens</dt>
    <dd class="invisible">What does the garden represent?</dd>

    <dt>Crater Lake National Park</dt>
    <dd class="invisible">Was the lake actually created by a crater?</dd>

    <dt>Death Valley National Park</dt>
    <dd class="invisible">How hot does it get here?</dd>

    <dt>Waco Mammoth National Monument</dt>
    <dd class="invisible">What kind of animals where discovered here?</dd>
</dl>
<h3>Adams National Historical Park</h3>
<ul>
    <li>Adams National Historical Park is located in the City of Quincy, Norfolk County, Massachusetts, approximately ten miles south of Boston.</li>
    <li>The story encompasses five generations of the Adams family (from 1720 to 1927) including two Presidents and First Ladies, three U.S. Ministers, historians, writers and family members who supported and contributed to the success of these public figures.</li>
    <li>Adams National Historical Park is located in the City of Quincy, Norfolk County, Massachusetts, approximately ten miles south of Boston. </li>
    <li>The site's main historic features include: John Adams Birthplace, where 2nd U.S. President John Adams was born on October 30, 1735, and less than 75 yards away the John Quincy Adams Birthplace where his son John Quincy Adams, 6th U.S.</li>
</ul>

<h3>Friendship Hill National Historic Site</h3>
<ul>
    <li>Friendship Hill National Historic Site preserves the country estate of Albert Gallatin, a Swiss emigrant who served his adopted nation during the early years of the republic</li>
    <li>Gallatin is best remembered for his thirteen year tenure as Secretary of the Treasury during the Jefferson and Madison administrations.</li>
    <li>In that time, he reduced the national debt, purchased the Louisiana Territory and funded the Lewis & Clark exploration.</li>
    <li>Gallatin's accomplishments and contributions to the late 18th and early 19th century American Republic are highlighted through exhibits and programs presented in his restored Friendship Hill house.</li>
</ul>

<h3>Padre Island National Seashore</h3>
<ul>
    <li>Padre Island National Seashore separates the Gulf of Mexico from the Laguna Madre, and protects coastline, dunes, prairies, and wind tidal flats.</li>
    <li>Padre Island National Seashore, encompassing 130,434 acres, is the longest remaining undeveloped stretch of barrier island in the world, and offers a wide variety of flora, fauna, and recreation.</li>
    <li>Padre Island National Seashore is the most important nesting beach in the U.S. for the Kemp's ridley, the most endangered sea turtle in the world.</li>
    <li>The park has been a participant in a bi-national, multi-agency effort to save the Kemp's ridley sea turtle since 1978. The park also participates in global efforts to recover the populations of four other threatened and endangered sea turtle species.</li>
</ul>

<button id="highlighter">Click Me!!!</button>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script>
    $('#highlighter').click(function (){
		$('dd').toggleClass("invisible")
    })
	$('dt').click(function(){
		$(this).toggleClass('highlight');
	});

	$('#highlighter').on('click', function(){
		$('ul').each(function(index, element){
			$(element).children().last().toggleClass('highlight');
		});
	});

	$('h3').click(function(){
		$(this).next().children().toggleClass('bold-text');
	});

	$('li').click(function(){
		$(this).parent().children().first().toggleClass('first-item-highlight');
	});

	$("h3").click(function(){
		$(this).next().slideToggle();
	});
</script>

</body>
</html>