# Accordion Element An **accordion** element is a common user interface ( UI ) component used to organize and manage pieces of content in a structured, compact and user-friendly way. It is named "accordion" because it functions similarly to the musical instrument of the same name, where sections can expand and collapse, revealing or hiding content. {% hint style="success" %} In Sygnal's SA5 implementation, the accordion is in the same family of UX's as a tab component or a slider, and we collectively refer to these as "deck elements". It is also not based on a native Webflow element and is instead {% endhint %} ## Use Cases * **Content Organization:** Accordions are particularly useful for organizing large amounts of information into digestible chunks. For example, they are often used in FAQs, where each question expands to reveal the answer. * **Forms and Surveys:** They can be used to break down lengthy forms into manageable steps or sections, improving the user's ability to focus on one task at a time. * **Mobile Design:** In responsive design, accordions are helpful in presenting content on small screens, where space is limited. ## Goals * No interactions dependencies * Easy designer setup * Good designer view * Strong programmatic control * Ability to tell when a new panel has opened * Ability to change the open panel programmatically ## Demonstration {% embed url="" %} {% embed url="" %} ## Getting Started ### STEP 1 - Add the Library First, **add the library** as detailed in [Quick Start](https://attr.sygnal.com/sa5-elements/quick-start). ### STEP 2 - Setup your Accordion element structure See [Element Structure](#element-structure), below. ``` DIV - [wfu-accordion] DIV - [wfu-accordion ``` ### STEP 2 - Apply the custom attributes to the elements you want to affect See above for details. ### STEP 3 - ( OPTIONAL ) Use the API & Callbacks to control the element from your custom code See above for details. ## Setting Up Your Accordion To keep everything easily managed and controlled within the designer, SA5's accordion uses the addition and removal of classes to control the open and closed states. This gives you the ability to define what open state looks like and what closed state looks like, all within the designer. {% hint style="info" %} Use the cloneable above for reference if you're unclear on any portion of the docs here. {% endhint %} Accordion setup requires three parts; 1. A simple element structure that defines the Accordion, its items, tabs, and contents 2. The custom attributes applied to these elements to describe and configure the Accordion 3. The definition of `is-open` and `is-closed` classes that allow you to fully control the open and closed-state appearance of; 1. The item wrapper 2. The item tab ( background color, icon, text color, etc. ) 3. The content panel ( especially the size when open / closed ) ## Accordion Elements **SA5's Accordion** follows a simple, general structure that consists of a main wrapper DIV, and then 3 DIVs per Accordion item. A static Accordion can simply be built with DIVs in this arrangement. ``` DIV - Accordion element DIV - Accordion item DIV - Accordion item tab ... tab contents ... DIV - Accordion item content ... main contents ... ... more Accordion items ``` For CMS-driven Accordions, you can use a Collection List; ``` DIV - Collection List Wrapper DIV - Collection List - Accordion element DIV - Collection Item - Accordion item DIV - Accordion item tab ... tab contents ... DIV - Accordion item content ... expando contents ... ``` ## Accordion Classes You can style your Accordion any way you like, including horizontal and vertial orientations. Our goal was to make the Accordion styling 100% under designer control with zero custom CSS. SA5 Accordion works by adding and removing the `is-open` and `is-closed` classes from your Accordion items, tabs, and content panes. Typically, the easiest approach is; 1. Design and style your Accordion items in the open state, exactly how you like. 2. Ensure that the Accordion Item, Accordion Item Tab, And Accordion Item Content elements all have classes defined. 3. Then to each, add an `is-closed` compound class and style the closed state. 4. Once you're done, you can remove that `is-closed` class to make content admin easier in the designer. It will still exist in the published site. {% hint style="warning" %} To prevent your `is-closed` class from being removed by Webflow's **Clean up unused styles** feature, apply the same combo class series to a DIV, and then put that in your style guide or wrap it in a hidden DIV on the page. This will ensure Webflow knows that the class is still needed. ![](https://2168358812-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBcvwQ6TdfCVq8IuMako%2Fuploads%2F6MqFGkzxIvGSbEm4veZy%2Fimage.png?alt=media\&token=902ee220-91ae-4091-b14a-0036718c699b) {% endhint %} {% hint style="info" %} The `is-open` class can also be styled but often this is not needed. {% endhint %} {% hint style="success" %} If you find it easier in the designer, you can keep the `is-open` and `is-closed` classes on your elements and publish the site that way. Either say SA5 will reset the classes appropriately when the page is loaded. {% endhint %} ## Accordion Attributes For SA5 Accordion to setup the accordion properly, you will need these custom attributes; ### wfu-accordion = ( name ) **Required.** Place this on the outer wrapper of your Accordion, the immediate parent of the items. In the case of a collection list, this is the middle Collection List element of the 3. The name is arbitrary, but it is used by the JS-API to allow you to differentiate between Accordions on your page in methods and events. ### wfu-accordion-item = ( name ) **Required.** Place this on the wrapper for each Accordion Item. In a collection list, this is the innermost Collection Item element of the 3. The name is arbitrary, and in a collection list you can bind it to the slug. It is used by the JS-API to allow you to select a specific accordion item by name, rather than by position. ### wfu-accordion-item-tab = ( no value ) **Required.** Place this on the tab DIV you create as an immediate child of the element with `wfu-accordion-item` attribute. ### wfu-accordion-item-content = ( no value ) **Required.** Place this on the content DIV you create as an immediate child of the element with `wfu-accordion-item` attribute. ### wfu-accordion-class-open = ( class name ) **Optional.** Allows you to specify a different class name for your open-state compound classes. Default is `is-open` ### wfu-accordion-class-closed = ( class name ) **Optional.** Allows you to specify a different class name for your closed-state compound classes. Default is `is-closed`