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>