Accordion componentAvailable since EcoComposer 1.0

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>
^