https://github.com/fliplet/fliplet-widget-accordion-start

Start of Accordion
https://github.com/fliplet/fliplet-widget-accordion-start

Last synced: about 4 hours ago
JSON representation

Start of Accordion

• Host: GitHub
• URL: https://github.com/fliplet/fliplet-widget-accordion-start
• Owner: Fliplet
• Created: 2017-09-29T08:49:29.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-02-18T09:49:43.000Z (9 months ago)
• Last Synced: 2024-02-18T10:36:46.349Z (9 months ago)
• Language: JavaScript
• Size: 83 KB
• Stars: 0
• Watchers: 7
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Accordion

This is one of a 2-part component:

* **Accordion Heading (this component)**

* [End of Accordion](https://github.com/Fliplet/fliplet-widget-accordion-end)

Accordions are created by arranging the `[HEADING]` and `[END]` components.

To create an accordion with one collapsible section:

```

[HEADING - Accordion Section]

Accordion content goes in between.

[END]

```

**Note: If an `[END]` component cannot be found the accordion will end at the end of the content container.**

To create an accordion with more than one collapsible section, add more `[HEADING]` components to separate the content. This is ideal if you want to make sure only one collapsible section is opened in an accordion.

```

[HEADING - Accordion Section 1]

Accordion content goes in between.

[HEADING - Accordion Section 2]

Accordion content goes in between.

[HEADING - Accordion Section 3]

Accordion content goes in between.

[END]

```

To create multiple independent collapsible sections that open and close separately, use more **END** components to separate the accordions.

```

[HEADING - Accordion Section 1]

Accordion content goes in between.

[END]

[HEADING - Accordion Section 2] // This one expands & collapses independently from the 1st accordion section

Accordion content goes in between.

[END]

```

## FAQ

* Can I nest accordions within accordions? **Not at the moment. We think the user experience would be quite poor and the content should be organized differently to avoid this situation.**