Accordion Component Demo

This page demonstrates the Accordion component with various configurations and examples.

Basic Accordion

A simple accordion with default settings.

<template>
  <OAccordion accordionTextRef="Click to expand/collapse">
    <template #accordionContent>
      <p>
        This is the content that will be shown when the accordion is expanded.
      </p>
      <p>You can include any HTML or components here.</p>
    </template>
  </OAccordion>
</template>

Click to expand/collapse

This is the content that will be shown when the accordion is expanded.

You can include any HTML or components here.

Multiple Accordions

Multiple accordions can be used together to create a collapsible content section.

<template>
  <div class="accordion-group">
    <OAccordion accordionTextRef="Section 1">
      <template #accordionContent>
        <p>Content for section 1</p>
        <p>You can include any HTML or components here.</p>
      </template>
    </OAccordion>

    <OAccordion accordionTextRef="Section 2">
      <template #accordionContent>
        <p>Content for section 2</p>
        <p>This section can be expanded or collapsed independently.</p>
      </template>
    </OAccordion>

    <OAccordion accordionTextRef="Section 3">
      <template #accordionContent>
        <p>Content for section 3</p>
        <p>Each accordion operates independently of the others.</p>
      </template>
    </OAccordion>
  </div>
</template>

<style>
.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Section 1

Content for section 1

You can include any HTML or components here.

Section 2

Content for section 2

This section can be expanded or collapsed independently.

Section 3

Content for section 3

Each accordion operates independently of the others.

Accordion with Rich Content

Accordions can contain any type of content, including other components, images, and formatted text.

<template>
  <OAccordion accordionTextRef="Rich Content Example">
    <template #accordionContent>
      <div class="rich-content">
        <h3>Nested Heading</h3>
        <p>This accordion contains rich content with various elements.</p>

        <div class="image-container">
          <img
            src="https://via.placeholder.com/300x150"
            alt="Placeholder Image"
          />
        </div>

        <h4>Features List</h4>
        <ul>
          <li>Feature 1: Lorem ipsum dolor sit amet</li>
          <li>Feature 2: Consectetur adipiscing elit</li>
          <li>Feature 3: Sed do eiusmod tempor incididunt</li>
        </ul>

        <div class="code-example">
          <h4>Code Example</h4>
          <pre>
            <code>
                function example() {
                  console.log("This is an example");
                }
            </code>
          </pre>
        </div>
      </div>
    </template>
  </OAccordion>
</template>

<style>
.rich-content {
  padding: 16px;
}

.image-container {
  margin: 16px 0;
  text-align: center;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.code-example {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
}

.code-example pre {
  margin: 0;
}
</style>

Rich Content Example

Nested Heading

This accordion contains rich content with various elements.

Features List

• Feature 1: Lorem ipsum dolor sit amet
• Feature 2: Consectetur adipiscing elit
• Feature 3: Sed do eiusmod tempor incididunt

Code Example

          
            
            function example() {
              console.log("This is an example");
            }
          
        

Nested Accordions

Accordions can be nested inside each other to create hierarchical content.

<template>
  <OAccordion accordionTextRef="Parent Accordion">
    <template #accordionContent>
      <p>This is the parent accordion content.</p>

      <OAccordion accordionTextRef="Child Accordion 1">
        <template #accordionContent>
          <p>This is the content of the first child accordion.</p>
        </template>
      </OAccordion>

      <OAccordion accordionTextRef="Child Accordion 2">
        <template #accordionContent>
          <p>This is the content of the second child accordion.</p>
        </template>
      </OAccordion>
    </template>
  </OAccordion>
</template>

Parent Accordion

This is the parent accordion content.

Child Accordion 1

This is the content of the first child accordion.

Child Accordion 2

This is the content of the second child accordion.