offline docs

offline-docs/daisyui/accordion.md

@@ -0,0 +1,68 @@
+# daisyUI Accordion Component Documentation
+
+## Overview
+The Accordion component is used for showing and hiding content, but only one item can stay open at a time. It works with radio inputs where all radio inputs with the same name work together, allowing only one item to be open simultaneously.
+
+## Key Features
+- Only one accordion item can be open at a time
+- Uses radio inputs for controlling which item is open
+- Supports different icon styles: arrow, plus/minus
+- Can be joined together using the `join` component
+
+## Classes and Modifiers
+
+| Class name | Type | Description |
+|------------|------|-------------|
+| collapse | Component | Base collapse class |
+| collapse-title | Part | Title part of accordion item |
+| collapse-content | Part | Content part of accordion item |
+| collapse-arrow | Modifier | Adds arrow icon |
+| collapse-plus | Modifier | Adds plus/minus icon |
+| collapse-open | Modifier | Force open accordion item |
+| collapse-close | Modifier | Force close accordion item |
+
+## Usage Examples
+
+### Basic Accordion
+```html
+<div class="collapse bg-base-100 border border-base-300">
+  <input type="radio" name="my-accordion-1" checked="checked" />
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
+</div>
+```
+
+### Accordion with Arrow Icon
+```html
+<div class="collapse collapse-arrow bg-base-100 border border-base-300">
+  <input type="radio" name="my-accordion-2" checked="checked" />
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
+</div>
+```
+
+### Accordion with Plus/Minus Icon
+```html
+<div class="collapse collapse-plus bg-base-100 border border-base-300">
+  <input type="radio" name="my-accordion-3" checked="checked" />
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
+</div>
+```
+
+### Joined Accordion Items
+```html
+<div class="join join-vertical bg-base-100">
+  <div class="collapse collapse-arrow join-item border-base-300 border">
+    <input type="radio" name="my-accordion-4" checked="checked" />
+    <div class="collapse-title font-semibold">How do I create an account?</div>
+    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
+  </div>
+</div>
+```
+
+## Important Notes
+- All radio inputs with the same name work together to control the accordion behavior
+- Only one item can be open at a time within the same group
+- Use different names for radio inputs if you have multiple sets of accordions on the same page
+- The accordion uses the same styling as the collapse component but with radio input controls