Skip to content

Commit 637622d

Browse files
arschmitzarschmitz
committed
Accordion: show ways to hide content flash in demos
1 parent c54d22b commit 637622d

File tree

2 files changed

+163
-0
lines changed

2 files changed

+163
-0
lines changed

‎demos/accordion/default-enhanced.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Accordion - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<link rel="stylesheet" href="../demos.css">
8+
<script src="../require-config.js"></script>
9+
<script src="../../external/requirejs/require.js"></script>
10+
<script>
11+
require( [ "ui/accordion" ], function() {
12+
$( "#accordion" ).accordion();
13+
} );
14+
</script>
15+
</head>
16+
<body>
17+
18+
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
19+
<h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-header-active ui-state-active ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0">Section 1</h3>
20+
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block; height: 148px;">
21+
<p>
22+
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
23+
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
24+
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
25+
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
26+
</p>
27+
</div>
28+
<h3 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1">Section 2</h3>
29+
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none; height: 148px;">
30+
<p>
31+
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
32+
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
33+
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
34+
suscipit faucibus urna.
35+
</p>
36+
</div>
37+
<h3 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-5" aria-controls="ui-id-6" aria-selected="false" aria-expanded="false" tabindex="-1">Section 3</h3>
38+
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-6" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="true" style="display: none; height: 148px;">
39+
<p>
40+
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
41+
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
42+
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
43+
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
44+
</p>
45+
<ul>
46+
<li>List item one</li>
47+
<li>List item two</li>
48+
<li>List item three</li>
49+
</ul>
50+
</div>
51+
<h3 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-7" aria-controls="ui-id-8" aria-selected="false" aria-expanded="false" tabindex="-1">Section 4</h3>
52+
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-8" aria-labelledby="ui-id-7" role="tabpanel" aria-hidden="true" style="display: none; height: 148px;">
53+
<p>
54+
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
55+
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
56+
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
57+
mauris vel est.
58+
</p>
59+
<p>
60+
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
61+
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
62+
inceptos himenaeos.
63+
</p>
64+
</div>
65+
</div>
66+
67+
<div class="demo-description">
68+
<p>
69+
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
70+
Optionally, toggle sections open/closed on mouseover.
71+
</p>
72+
<p>
73+
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
74+
usable without JavaScript.
75+
</p>
76+
</div>
77+
</body>
78+
</html>

‎demos/accordion/default-hide.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Accordion - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<link rel="stylesheet" href="../demos.css">
8+
<script src="../require-config.js"></script>
9+
<script src="../../external/requirejs/require.js"></script>
10+
<script>
11+
require( [ "ui/accordion" ], function() {
12+
$( "body" ).css( "display", "block" );
13+
$( "#accordion" ).accordion();
14+
} );
15+
</script>
16+
<style>
17+
/* this would go in demos.css if we did this in all demos*/
18+
body {
19+
display: none;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
25+
<div id="accordion">
26+
<h3>Section 1</h3>
27+
<div>
28+
<p>
29+
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
30+
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
31+
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
32+
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
33+
</p>
34+
</div>
35+
<h3>Section 2</h3>
36+
<div>
37+
<p>
38+
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
39+
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
40+
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
41+
suscipit faucibus urna.
42+
</p>
43+
</div>
44+
<h3>Section 3</h3>
45+
<div>
46+
<p>
47+
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
48+
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
49+
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
50+
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
51+
</p>
52+
<ul>
53+
<li>List item one</li>
54+
<li>List item two</li>
55+
<li>List item three</li>
56+
</ul>
57+
</div>
58+
<h3>Section 4</h3>
59+
<div>
60+
<p>
61+
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
62+
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
63+
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
64+
mauris vel est.
65+
</p>
66+
<p>
67+
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
68+
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
69+
inceptos himenaeos.
70+
</p>
71+
</div>
72+
</div>
73+
74+
<div class="demo-description">
75+
<p>
76+
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
77+
Optionally, toggle sections open/closed on mouseover.
78+
</p>
79+
<p>
80+
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
81+
usable without JavaScript.
82+
</p>
83+
</div>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)