Skip to content

Commit

Permalink
chore(docs): update docs
Browse files Browse the repository at this point in the history
Co-authored-by: Ian McBurnie <38065+ianmcburnie@users.noreply.github.com>
  • Loading branch information
saiponnada and ianmcburnie authored Nov 22, 2024
1 parent 671b78d commit 51ba760
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/modules/accordion.marko
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<section-header metadata=input.metadata name=input.name/>

<p>
An accordion is a list of <a href="#details">details</a> that are grouped together. Interacting with each item can expand or collapse to show or hide additional content.
An accordion is a series of expandable sections of content. Each section has a summary header that is used to toggle the display of its related content.
</p>

<h3>Default Accordion</h3>
<p>By default, each section(aka details) can be opened & remain open until closed manually.</p>
<p>By default, each section is rendered as closed. When opened, the section will stay open until explicitly closed.</p>
<div class="demo">
<div class="demo__inner">
<ul
Expand Down Expand Up @@ -159,7 +159,7 @@
</highlight-code>

<h3>Opened Accordion</h3>
<p>Apply <span class="highlight">Open</span> attribute on details to open the section.</p>
<p>Apply the <span class="highlight">open</span> property to render a section in an open state.</p>
<div class="demo">
<div class="demo__inner">
<ul
Expand Down Expand Up @@ -312,9 +312,9 @@
<p>
Apply the
<span class="highlight">
details__summary--large
accordion--large
</span>
class to use the larger version of accordion.
modifier to increase the size of each section summary.
</p>
<div class="demo">
<div class="demo__inner">
Expand Down Expand Up @@ -461,8 +461,8 @@
</ul>
</highlight-code>

<h3>Auto collapsing Accordion</h3>
<p>Use the <span class="highlight">name</span> attribute, to ensure only one section can be open at a time, with other sections automatically closing.</p>
<h3>Auto-Collapsing Accordion</h3>
<p>Use the <span class="highlight">name</span> attribute to ensure only one section can be open at a time, with other sections automatically closing.</p>
<p><b>NOTE:</b> For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.</p>
<div class="demo">
<div class="demo__inner">
Expand Down

0 comments on commit 51ba760

Please sign in to comment.