Accordion componentAvailable since EcoComposer 1.0

Accordion examples
Default SCSS values
SCSS implementation
HTML implementation

Classical accordion example :

Essential Steps
to Launch
a Successful
Project
in Business

To ensure the success of a project, it's crucial to follow these steps:

Analyze client needs and define clear goals.
Plan resources and establish a realistic timeline.
Implement a rigorous testing phase before deployment.
Monitor and adapt the project based on user feedback.

Another example :

Benefits of Our Solution

Our solution offers several benefits for businesses:

Flexibility and customization to meet diverse needs.
Optimized performance thanks to a modern infrastructure.
Intuitive interface, making adoption easy for teams.
24/7 technical support for continuous assistance.

The default values are :

accordion--arrow--background-image : 'accordion--arrow--background-image',
accordion--background-image : 'accordion--background-image',
accordion--box-shadow : 'accordion--box-shadow',
accordion--color : 'accordion--color',
font-size : 2rem * theming.$font-size,
margin-bottom : 1rem * theming.$font-size,
details-padding : 1rem * theming.$font-size,
print : false,
shadow : true,
summary-padding : 1rem * theming.$font-size,
suffix : '',
themes :  (
  light : (
    default--accordion--arrow--background-image : linear-gradient(90deg, #088, #2e1),
    default--accordion--background-image : linear-gradient(45deg, transparent, #088, transparent),
    default--accordion--color : #333
  ),
  dark : (
    default--accordion--arrow--background-image : linear-gradient(90deg, #aab, #457),
    default--accordion--background-image : linear-gradient(45deg, transparent, #aaf, transparent),
    default--accordion--color : #ccc
  )
)

We can implement it that way :

@include accordion.init();
@include accordion.create();
@include accordion.create((
  themes : $themes,
  suffix : '-2',
  font-size : 3rem,
  margin-bottom : 1.5rem,
  padding : 0.5rem
));

We can implement it that way :

-2

is the suffix here.

<details class=accordion-2>
  <summary class=accordion-2>
    Another title
  </summary>
  <p class="doc-paragraph accordion-2--block">
    Description of your another content.
  </p>
</details>