Simple accordion pattern example
Last active
August 26, 2024 10:12
-
-
Save bcernesto/ca8a269527af99e577ea11bb7a7edbe5 to your computer and use it in GitHub Desktop.
Simple accordion pattern example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="accordionGroup" class="accordion"> | |
<h3> | |
<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id"> | |
<span class="accordion-title"> | |
Personal Information | |
<span class="accordion-icon"></span> | |
</span> | |
</button> | |
</h3> | |
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel"> | |
<div> | |
<fieldset> | |
<p> | |
<label for="cufc1">Name<span aria-hidden="true">*</span>:</label> | |
<input type="text" value="" name="Name" id="cufc1" class="required" aria-required="true"> | |
</p> | |
<p> | |
<label for="cufc2">Email<span aria-hidden="true">*</span>:</label> | |
<input type="text" value="" name="Email" id="cufc2" aria-required="true"> | |
</p> | |
<p> | |
<label for="cufc3">Phone:</label> | |
<input type="text" value="" name="Phone" id="cufc3"> | |
</p> | |
<p> | |
<label for="cufc4">Extension:</label> | |
<input type="text" value="" name="Ext" id="cufc4"> | |
</p> | |
<p> | |
<label for="cufc5">Country:</label> | |
<input type="text" value="" name="Country" id="cufc5"> | |
</p> | |
<p> | |
<label for="cufc6">City/Province:</label> | |
<input type="text" value="" name="City_Province" id="cufc6"> | |
</p> | |
</fieldset> | |
</div> | |
</div> | |
<h3> | |
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion2id"> | |
<span class="accordion-title"> | |
Billing Address | |
<span class="accordion-icon"></span> | |
</span> | |
</button> | |
</h3> | |
<div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden=""> | |
<div> | |
<fieldset> | |
<p> | |
<label for="b-add1">Address 1:</label> | |
<input type="text" name="b-add1" id="b-add1"> | |
</p> | |
<p> | |
<label for="b-add2">Address 2:</label> | |
<input type="text" name="b-add2" id="b-add2"> | |
</p> | |
<p> | |
<label for="b-city">City:</label> | |
<input type="text" name="b-city" id="b-city"> | |
</p> | |
<p> | |
<label for="b-state">State:</label> | |
<input type="text" name="b-state" id="b-state"> | |
</p> | |
<p> | |
<label for="b-zip">Zip Code:</label> | |
<input type="text" name="b-zip" id="b-zip"> | |
</p> | |
</fieldset> | |
</div> | |
</div> | |
<h3> | |
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion3id"> | |
<span class="accordion-title"> | |
Shipping Address | |
<span class="accordion-icon"></span> | |
</span> | |
</button> | |
</h3> | |
<div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden=""> | |
<div> | |
<fieldset> | |
<p> | |
<label for="m-add1">Address 1:</label> | |
<input type="text" name="m-add1" id="m-add1"> | |
</p> | |
<p> | |
<label for="m-add2">Address 2:</label> | |
<input type="text" name="m-add2" id="m-add2"> | |
</p> | |
<p> | |
<label for="m-city">City:</label> | |
<input type="text" name="m-city" id="m-city"> | |
</p> | |
<p> | |
<label for="m-state">State:</label> | |
<input type="text" name="m-state" id="m-state"> | |
</p> | |
<p> | |
<label for="m-zip">Zip Code:</label> | |
<input type="text" name="m-zip" id="m-zip"> | |
</p> | |
</fieldset> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* This content is licensed according to the W3C Software License at | |
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document | |
* | |
* Simple accordion pattern example | |
*/ | |
'use strict'; | |
class Accordion { | |
constructor(domNode) { | |
this.rootEl = domNode; | |
this.buttonEl = this.rootEl.querySelector('button[aria-expanded]'); | |
const controlsId = this.buttonEl.getAttribute('aria-controls'); | |
this.contentEl = document.getElementById(controlsId); | |
this.open = this.buttonEl.getAttribute('aria-expanded') === 'true'; | |
// add event listeners | |
this.buttonEl.addEventListener('click', this.onButtonClick.bind(this)); | |
} | |
onButtonClick() { | |
this.toggle(!this.open); | |
} | |
toggle(open) { | |
// don't do anything if the open state doesn't change | |
if (open === this.open) { | |
return; | |
} | |
// update the internal state | |
this.open = open; | |
// handle DOM updates | |
this.buttonEl.setAttribute('aria-expanded', `${open}`); | |
if (open) { | |
this.contentEl.removeAttribute('hidden'); | |
} else { | |
this.contentEl.setAttribute('hidden', ''); | |
} | |
} | |
// Add public open and close methods for convenience | |
open() { | |
this.toggle(true); | |
} | |
close() { | |
this.toggle(false); | |
} | |
} | |
// init accordions | |
const accordions = document.querySelectorAll('.accordion h3'); | |
accordions.forEach((accordionEl) => { | |
new Accordion(accordionEl); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://www.w3.orgcontent/shared/js/utils.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.accordion { | |
margin: 0; | |
padding: 0; | |
border: 2px solid hsl(0deg 0% 52%); | |
border-radius: 7px; | |
width: 20em; | |
} | |
.accordion h3 { | |
margin: 0; | |
padding: 0; | |
} | |
.accordion:focus-within { | |
border-color: hsl(216deg 94% 43%); | |
} | |
.accordion:focus-within h3 { | |
background-color: hsl(0deg 0% 97%); | |
} | |
.accordion > * + * { | |
border-top: 1px solid hsl(0deg 0% 52%); | |
} | |
.accordion-trigger { | |
background: none; | |
color: hsl(0deg 0% 13%); | |
display: block; | |
font-size: 1rem; | |
font-weight: normal; | |
margin: 0; | |
padding: 1em 1.5em; | |
position: relative; | |
text-align: left; | |
width: 100%; | |
outline: none; | |
} | |
.accordion-trigger:focus, | |
.accordion-trigger:hover { | |
background: hsl(216deg 94% 94%); | |
} | |
.accordion-trigger:focus { | |
outline: 4px solid transparent; | |
} | |
.accordion > *:first-child .accordion-trigger, | |
.accordion > *:first-child { | |
border-radius: 5px 5px 0 0; | |
} | |
.accordion > *:last-child .accordion-trigger, | |
.accordion > *:last-child { | |
border-radius: 0 0 5px 5px; | |
} | |
button { | |
border-style: none; | |
} | |
.accordion button::-moz-focus-inner { | |
border: 0; | |
} | |
.accordion-title { | |
display: block; | |
pointer-events: none; | |
border: transparent 2px solid; | |
border-radius: 5px; | |
padding: 0.25em; | |
outline: none; | |
} | |
.accordion-trigger:focus .accordion-title { | |
border-color: hsl(216deg 94% 43%); | |
} | |
.accordion-icon { | |
border: solid currentcolor; | |
border-width: 0 2px 2px 0; | |
height: 0.5rem; | |
pointer-events: none; | |
position: absolute; | |
right: 2em; | |
top: 50%; | |
transform: translateY(-60%) rotate(45deg); | |
width: 0.5rem; | |
} | |
.accordion-trigger:focus .accordion-icon, | |
.accordion-trigger:hover .accordion-icon { | |
border-color: hsl(216deg 94% 43%); | |
} | |
.accordion-trigger[aria-expanded="true"] .accordion-icon { | |
transform: translateY(-50%) rotate(-135deg); | |
} | |
.accordion-panel { | |
margin: 0; | |
padding: 1em 1.5em; | |
} | |
/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */ | |
.accordion-panel[hidden] { | |
display: none; | |
} | |
fieldset { | |
border: 0; | |
margin: 0; | |
padding: 0; | |
} | |
input { | |
border: 1px solid hsl(0deg 0% 42%); | |
border-radius: 0.3em; | |
display: block; | |
font-size: inherit; | |
padding: 0.3em 0.5em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://www.w3.org/content/shared/css/core.css" rel="stylesheet" /> | |
<link href="https://www.w3.org/StyleSheets/TR/2016/base.css" rel="stylesheet" /> | |
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment