alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(website): add accordion documentation

Browse source
This commit is contained in:
Alexander Navarro 2024-12-30 16:01:53 -03:00
parent c0a20f8993
commit 319d56d078
1 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

44
packages/website/content/components/accordion.md
View file

@ -3,29 +3,39 @@
section = ["Components"]
+++
# accordion.md
# Accordion
Example:
## Basic
The accordion component allows to hide and show content in the page. The
accordion is composed of the following elements:
- `msp-accordion`: the main container that encapsulates multiple toggable elements.
- `msp-accordion-item`: a single toggable element.
- `msp-accordion-header`: this element acts as the header and responds to the `onclick` event to toggle the content.
- `msp-accordion-collapse`: container for the content, needed to help with dynamic height and transitions.
- `msp-accordion-content`: the content of the accordion.
### Example:
```html
<ul class="msp-list-unstyle msp-accordion">
<li>
<a href="/">Overview</a>
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="#">ITEM 001</a>
<div class="msp-accordion-collapse">
<div class="msp-list-unstyle msp-accordion-content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
</div>
</div>
</li>
{% for item in get_taxonomy(kind="section") | get(key="items") %}
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="#">{{ item.name | title }}</a>
<div class="msp-accordion-collapse">
<ul class="msp-list-unstyle msp-accordion-content">
{% for page in item.pages %}
<li class="">
<a href="{{ page.permalink }}">{{ page.title | default(value=page.slug) | title }}</a>
</li>
{% endfor %}
</ul>
<li class="msp-accordion-item">
<a class="msp-accordion-header" href="#">ITEM 002</a>
<div class="msp-accordion-collapse">
<div class="msp-list-unstyle msp-accordion-content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Et integer sagittis praesent nisi phasellus. Rutrum elit integer senectus, velit lectus condimentum auctor fringilla.
</div>
</li>
{% endfor %}
</div>
</li>
</ul>
```