You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
Copy file name to clipboardExpand all lines: docs/content/content-collapsible-set.html
+46-20Lines changed: 46 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -28,67 +28,93 @@ <h2>Collapsible set markup</h2>
28
28
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
51
+
<h3>Section 1</h3>
52
+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
53
53
</div>
54
54
<divdata-role="collapsible">
55
-
<h3>Section B</h3>
55
+
<h3>Section 2</h3>
56
56
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
57
57
58
58
</div>
59
59
<divdata-role="collapsible">
60
-
<h3>Section C</h3>
60
+
<h3>Section 3</h3>
61
61
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
62
62
63
63
</div>
64
64
<divdata-role="collapsible">
65
-
<h3>Section D</h3>
65
+
<h3>Section 4</h3>
66
66
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
67
67
68
68
</div>
69
69
<divdata-role="collapsible">
70
-
<h3>Section E</h3>
70
+
<h3>Section 5</h3>
71
71
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
72
72
73
73
</div>
74
74
</div>
75
75
76
-
<p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
76
+
<h2>Theming collapsible content</h2>
77
+
<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
91
+
<h3>Section 2</h3>
92
+
<p>Collapsible content</p>
86
93
87
94
</div>
88
95
<divdata-role="collapsible">
89
-
<h3>Section H</h3>
90
-
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
96
+
<h3>Section 3</h3>
97
+
<p>Collapsible content</p>
98
+
</div>
99
+
</div>
100
+
101
+
102
+
<h2>Theming individual sections</h2>
103
+
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
32
32
33
33
<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
34
-
35
-
<pre><code>
36
-
<div data-role="collapsible">
37
-
<h3>I'm a header</h3>
38
-
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
40
+
</div>
41
+
</code></pre>
41
42
42
43
43
44
<divdata-role="collapsible">
44
45
<h3>I'm a header</h3>
45
46
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
46
47
</div>
47
48
48
-
49
-
<p>As the example notes, by default the content will be collapsed. To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
49
+
<h2>Expanding collapsibles on load</h2>
50
+
51
+
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
61
63
</div>
62
64
65
+
<h2>Theming collapsible content</h2>
66
+
67
+
63
68
<p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
69
+
70
+
<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
<p>I'm the collapsible content with a themed content block set to "C".</p>
82
+
</div>
83
+
84
+
<h2>Theming collapsible headers</h2>
85
+
<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
<p>I'm the collapsible content with a themed content block set to "D".</p>
104
+
</div>
64
105
65
-
<h2>Collapsible example</h2>
66
-
<p>This page has 5 collapsible containers with different types of content inside.</p>
67
-
68
-
<divdata-role="collapsible">
69
-
<h3>Section 1: Collapsed text block</h3>
70
-
<p>I'm closed when the page loads because that's the default state of a collapsible.</p>
71
-
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
<p>I'm opened when the page loads because I have the <code>data-collapsed="false"</code> attribute on my container. </p>
77
-
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <ahref="content-collapsible-set.html">Learn more</a></p>
129
163
130
164
@@ -141,13 +175,13 @@ <h3>More in this section</h3>
0 commit comments