From 319d56d0786c2af8dc5450cc25e2d312a3de76a5 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Mon, 30 Dec 2024 16:01:53 -0300
Subject: [PATCH] feat(website): add accordion documentation

---
 .../website/content/components/accordion.md   | 44 ++++++++++++-------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/website/content/components/accordion.md b/packages/website/content/components/accordion.md
index 51987ec..7c92c86 100644
--- a/packages/website/content/components/accordion.md
+++ b/packages/website/content/components/accordion.md
@@ -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>
 ```