Accordion Preview

01

Instructions

02
Integration:
Copy and paste the provided script into your Webflow project. Place it in the <head> of your website!
<!-- Accordion Toggle by Delta Clan -->
<script defer
 src="https://cdn.jsdelivr.net/npm/@deltaclan/attributes-accordiontoggle@1/dist/accordiontoggle.js"></script>
<!-- Accordion Toggle by Delta Clan -->
<script defer
  src="https://cdn.jsdelivr.net/npm/@deltaclan/attributes-accordiontoggle@1/dist/accordiontoggle.js"></script>
Copy
Apply to Accordion:
Apply the custom attributes:
dc-accordion
=
list
Description: Marks an element as an accordion container.
Usage: Place this attribute on a div or any container element that holds your accordion items.
dc-accordion-toggle
=
"CLASS-NAME"
Description: Specifies the class name of toggle elements within the accordion.
Usage: Replace CLASS-NAME with the class assigned to your toggle elements.
Optional
dc-accordion-default
=
"NUMBER"
Description: Sets which accordion item should be open by default when the page loads. Defaults to 1.
Usage: Replace NUMBER with the position of the item you want open by default (use 0 to start with all closed).
Optional
dc-accordion-close
=
true
Description: Determines whether opening one item should automatically close others. By default, opening a new item closes the current one or all the open ones (true).
Usage: Set to false to allow multiple items to remain open simultaneously.
Optional
dc-accordion-open-all
=
true
Description: Open all items by default.
Notes: Ignores dc-accordion-default.
Instructions image