-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs-test1.html
66 lines (58 loc) · 3.02 KB
/
js-test1.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>javascript - test one - create an accordion widget</title>
<style>
.header { background: silver; font-weight: bold; padding: 5px;}
.contents { background: white; border: 1px solid silver; padding: 5px;}
</style>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="stellatest.js" type="text/javascript"></script>
</head>
<body>
<h3>Instructions:</h3>
<p>Create a very simple accordion widget. Each accordion container
is split into two parts: a header, and its contents. Clicking on the
header toggles the visibility of its related content.</p>
<p>Feel free to use a javascript library (e.g., jQuery, Prototype, YUI, ExtJs, dojo) to support your work but please do not use any plugins or pre-built widgets. There are plenty of implementations and examples out there. However, you cannot simply copy those examples or an already created widget.</p>
<p>Creating this widget should demonstrate your knowledge of javascript, and show off your software design skills. Include implementation notes. Bonus points for readability, originality, and extendibility.</p>
<br> <br>
<div class="container">
<div class="accordion header">Lorem ipsum <span>+</span></div>
<div class="accordion contents">
<p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem
ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor
amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem
ipsum sit dolor amet.</p>
<p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem
ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor
amet. Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. Lorem
ipsum sit dolor amet.</p>
</div>
<div class="accordion header">Restaurants!<span>+</span></div>
<div class="accordion contents">
<h3>Awesome restaurants in Manhattan:</h3>
<ul>
<li>Locande Verde</li>
<li>Gordon Ramsey at the London</li>
<li>Daniel</li>
<li>P J Clarkes</li>
<li>Shake Shack</li>
</ul>
</div>
<div class="accordion header">Bars!<span>+</span></div>
<div class="accordion contents">
<p>Get drinks here:</p>
<ul>
<li>The Gem</li>
<li>Sneaky Dee's</li>
<li>Sweaty Betty's</li>
<li>Ronnie's Local 69</li>
</ul>
</div>
</div>
</body>
</html>