Skip to content

Commit 0147f9d

Browse files
author
Joe Crick
committed
(master): Refactor accordion class names
1 parent 31842cb commit 0147f9d

File tree

4 files changed

+47
-59
lines changed

4 files changed

+47
-59
lines changed

‎index.html‎

Lines changed: 36 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -152,28 +152,28 @@ <h2 class="content-subhead">Accordion</h2>
152152

153153
<ul class="accordion">
154154
<li class="accordion-section">
155-
<input type="radio" class="hidden-header hidden" id="a-1" name="a-tab-head" role="tab"
155+
<input type="radio" class="accordion-section-selector hidden" id="a-1" name="a-tab-head" role="tab"
156156
checked/>
157157
<label for="a-1" class="tab-header">Option 0</label>
158-
<div class="content">
158+
<div class="accordion-section-content">
159159
<h2>Heading 1</h2>
160160
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
161161
viverra
162162
vel vestibulum in,
163163
</div>
164164
</li>
165165
<li class="accordion-section">
166-
<input type="radio" class="hidden-header hidden" id="a-2" name="a-tab-head" role="tab"/>
166+
<input type="radio" class="accordion-section-selector hidden" id="a-2" name="a-tab-head" role="tab"/>
167167
<label for="a-2" class="tab-header">Option 1</label>
168-
<div class="content">
168+
<div class="accordion-section-content">
169169
<h2>Heading 1</h2>
170170
Content goes here
171171
</div>
172172
</li>
173173
<li class="accordion-section">
174-
<input type="radio" class="hidden-header hidden" id="a-3" name="a-tab-head" role="tab"/>
174+
<input type="radio" class="accordion-section-selector hidden" id="a-3" name="a-tab-head" role="tab"/>
175175
<label for="a-3" class="tab-header">Option 2</label>
176-
<div class="content">
176+
<div class="accordion-section-content">
177177
<h2>Heading 2</h2>
178178
Lorem Ipsum
179179
</div>
@@ -182,29 +182,29 @@ <h2>Heading 2</h2>
182182

183183
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
184184
&lt;ul class=<span style="color: #a31515">&quot;accordion&quot;</span>&gt;
185-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
186-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span style="color: #a31515">&quot;a-1&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>
185+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
186+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-1&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>
187187
checked/&gt;
188188
&lt;label for=<span style="color: #a31515">&quot;a-1&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 0&lt;/label&gt;
189-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
189+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
190190
&lt;h2&gt;Heading 1&lt;/h2&gt;
191191
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
192192
viverra
193193
vel vestibulum in,
194194
&lt;/div&gt;
195195
&lt;/li&gt;
196-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
197-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span style="color: #a31515">&quot;a-2&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
196+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
197+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-2&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
198198
&lt;label for=<span style="color: #a31515">&quot;a-2&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 1&lt;/label&gt;
199-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
199+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
200200
&lt;h2&gt;Heading 1&lt;/h2&gt;
201201
Content goes here
202202
&lt;/div&gt;
203203
&lt;/li&gt;
204-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
205-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span style="color: #a31515">&quot;a-3&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
204+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
205+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-3&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
206206
&lt;label for=<span style="color: #a31515">&quot;a-3&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 2&lt;/label&gt;
207-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
207+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
208208
&lt;h2&gt;Heading 2&lt;/h2&gt;
209209
Lorem Ipsum
210210
&lt;/div&gt;
@@ -616,77 +616,65 @@ <h2 class="content-subhead">Tabs</h2>
616616

617617
<ul class="accordion accordion-tab">
618618
<li class="accordion-section">
619-
<input type="radio" class="hidden-header hidden" id="zero" name="tab-head" role="tab"
619+
<input type="radio" class="accordion-section-selector hidden" id="zero" name="tab-head" role="tab"
620620
checked/>
621621
<label for="zero" class="tab-header">Option 0</label>
622-
<div class="content">
622+
<div class="accordion-section-content">
623623
<h2>Heading 1</h2>
624624
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
625625
viverra
626626
vel vestibulum in,
627627
</div>
628628
</li>
629629
<li class="accordion-section">
630-
<input type="radio" class="hidden-header hidden" id="one" name="tab-head" role="tab"/>
630+
<input type="radio" class="accordion-section-selector hidden" id="one" name="tab-head" role="tab"/>
631631
<label for="one" class="tab-header">Option 1</label>
632-
<div class="content">
632+
<div class="accordion-section-content">
633633
<h2>Heading 1</h2>
634634
Content goes here
635635
</div>
636636
</li>
637637
<li class="accordion-section">
638-
<input type="radio" class="hidden-header hidden" id="two" name="tab-head" role="tab"/>
638+
<input type="radio" class="accordion-section-selector hidden" id="two" name="tab-head" role="tab"/>
639639
<label for="two" class="tab-header">Option 2</label>
640-
<div class="content">
640+
<div class="accordion-section-content">
641641
<h2>Heading 2</h2>
642642
Lorem Ipsum
643643
</div>
644644
</li>
645645
</ul>
646646

647-
648-
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
649-
style="margin: 0; line-height: 125%">
647+
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
650648
&lt;ul class=<span style="color: #a31515">&quot;accordion accordion-tab&quot;</span>&gt;
651-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
652-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span
653-
style="color: #a31515">&quot;zero&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
654-
style="color: #a31515">&quot;tab&quot;</span>
649+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
650+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;zero&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>
655651
checked/&gt;
656-
&lt;label <span style="color: #0000ff">for</span>=<span
657-
style="color: #a31515">&quot;zero&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 0&lt;/label&gt;
658-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
652+
&lt;label for=<span style="color: #a31515">&quot;zero&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 0&lt;/label&gt;
653+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
659654
&lt;h2&gt;Heading 1&lt;/h2&gt;
660655
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
661656
viverra
662-
vel vestibulum <span style="color: #0000ff">in</span>,
657+
vel vestibulum in,
663658
&lt;/div&gt;
664659
&lt;/li&gt;
665-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
666-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span
667-
style="color: #a31515">&quot;one&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
668-
style="color: #a31515">&quot;tab&quot;</span>/&gt;
669-
&lt;label <span style="color: #0000ff">for</span>=<span
670-
style="color: #a31515">&quot;one&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 1&lt;/label&gt;
671-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
660+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
661+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;one&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
662+
&lt;label for=<span style="color: #a31515">&quot;one&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 1&lt;/label&gt;
663+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
672664
&lt;h2&gt;Heading 1&lt;/h2&gt;
673665
Content goes here
674666
&lt;/div&gt;
675667
&lt;/li&gt;
676-
&lt;li class=<span style="color: #a31515">&quot;section&quot;</span>&gt;
677-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;hidden-header hidden&quot;</span> id=<span
678-
style="color: #a31515">&quot;two&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
679-
style="color: #a31515">&quot;tab&quot;</span>/&gt;
680-
&lt;label <span style="color: #0000ff">for</span>=<span
681-
style="color: #a31515">&quot;two&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 2&lt;/label&gt;
682-
&lt;div class=<span style="color: #a31515">&quot;content&quot;</span>&gt;
668+
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
669+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;two&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
670+
&lt;label for=<span style="color: #a31515">&quot;two&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 2&lt;/label&gt;
671+
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
683672
&lt;h2&gt;Heading 2&lt;/h2&gt;
684673
Lorem Ipsum
685674
&lt;/div&gt;
686675
&lt;/li&gt;
687676
&lt;/ul&gt;
688-
</pre>
689-
</div>
677+
</pre></div>
690678

691679

692680
</div>

‎main.css‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)