-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery-faq.html
172 lines (146 loc) · 6.35 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQ</title>
<style>
.invisible {
display: none;
}
dd {
color: #2846ff;
}
</style>
</head>
<body>
<div>
<!---------------------------------- NEWS LETTER -->
<h1>Would you like to sign up for the news letter?</h1>
<span>x</span>
</div>
<h1>Frequently Asked Questions</h1>
<h2 id="register">Register For The Site</h2>
<button id="visible">Show Answers</button>
<!-------------------------------------- FAQ -->
<dl>
<dt>What's going on?</dt>
<dd class="invisible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur deserunt dolor illo, illum iste
laudantium maxime non officia optio perferendis quam quas quia recusandae sed totam vero voluptas, voluptatum.
</dd>
<dt>What is your favorite pizza place?</dt>
<dd class="invisible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi, assumenda at ipsam iusto odio officia
reprehenderit soluta. A ad dolor explicabo laudantium non optio reiciendis repudiandae ut vero. Soluta.
</dd>
<dt>Are we there yet?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid, aut dolore eos ex harum
ipsa iusto minima modi molestiae, natus nihil odio, officiis pariatur porro quos tempora? Expedita, fuga.
</dd>
<dt>Who am I?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at dolorem doloremque esse
harum maxime molestias mollitia natus, nihil nisi omnis ratione repudiandae, sapiente soluta sunt ullam veniam!
Nemo, nisi.
</dd>
<dt>Where should I go?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum inventore iste odio odit
tempora! Alias delectus dolor iusto minima minus molestias, neque officia provident quam quo, saepe vel
voluptates, voluptatum.
</dd>
<dt>What time is it?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et illo molestiae optio,
quae saepe tempore vitae voluptates. Aliquid aperiam consequatur cupiditate ducimus facere molestiae non numquam
similique, totam vel.
</dd>
<dt>Do you like Ice cream?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam at esse explicabo porro
reprehenderit velit voluptas voluptate voluptatem. At blanditiis exercitationem minus officia. Aut dignissimos
ipsum laborum odio odit optio.
</dd>
<dt>Is it safe here?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid facere sed? A
beatae esse necessitatibus placeat ullam! Adipisci at consequuntur cumque dolorem dolores id nisi nobis, odio
quia voluptatem.
</dd>
<dt>Where to go from here?</dt>
<dd class="invisible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio excepturi, voluptates.
Autem consequuntur cum dolorum ea esse est fuga ipsum libero minus provident quia rem similique, tempore ut
velit voluptas?
</dd>
<dt>What to do now?</dt>
<dd class="invisible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea error illum iure magni sed suscipit
temporibus, voluptates voluptatum? Culpa dicta dignissimos doloribus inventore numquam placeat possimus quia sed
tempora?
</dd>
</dl>
<!-------------------------------------------- FUN FACTS -->
<button id="yellow">click for yellow</button>
<h3>x Park</h3>
<ul class="facts">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aliquam consequatur dicta do</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, dolores excepturi explicabo harum id</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem blanditiis culpa dele</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantiu</li>
</ul>
<h3>y Park</h3>
<ul class="facts">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam aut doloremque ducimu</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, consequuntur deserunt dolore</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam delectus dolores ea</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis earum numquam voluptate. A</li>
</ul>
<h3>w Park</h3>
<ul class="facts">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic in libero minima odit reiciend</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus amet cupidita</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut, ex, explicabo ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet animi, at blanditiis,</li>
</ul>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
"use strict";
/////////////////////////// NEWS LETTER.
$("span").bind("click", function () {
$(this).parents("div").hide(500);
});
/////////////////////////// FAQ.
$("#visible").click(function () {
console.log(event.target);
event.preventDefault();
$("dd").toggleClass("invisible");
});
///////
$("dt").click(function () {
// $("dt").css("background-color", "#fff");
$(this).css("background-color", "#fcff6a");
});
//////
$("dt").dblclick(function () {
$(this).css("background-color", "#fff");
});
/////////////////////////// FUNC FACTS.
$("#yellow").bind("click", function () {
$("ul").each(function () {
$(this).children("li").last().css("background-color", "#fcff6a");
});
});
//////
$("h3").bind("click", function () {
$(this).next("ul").children("li").first().css("font-weight", "bold");
});
//////
$("li").bind("click", function () {
$(this).parents("ul").children("li").first().css("color", "blue");
});
//////
$(".facts").hide();
$("h3").bind("click", function() {
$(this).next("ul").slideToggle();
});
setTimeout(function() {
$("h2").fadeIn();
}, 1000);
</script>
</body>
</html>