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 :
-2is 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>