Accordion

An accordion is like a digital folder that expands and collapses to reveal or hide its contents. It's a nifty tool for organizing information, allowing users to quickly navigate through a website without feeling overwhelmed by a barrage of text. With an accordion, users can easily find what they're looking for, without having to scroll through endless pages of content.

Example

<div class="accordion">
    <div class="item">
        <button type="button" aria-expanded="false" aria-controls="accordion-panel-1" id="accordion-header-1"
                id="accordion1id">
                <span class="accordion-title">
                  Personal Information
                  <span class="accordion-icon"></span>
                </span>
        </button>
        <div class="content" id="accordion-panel-1"
             aria-labelledby="accordion-header-1"
             hidden>333
        </div>
    </div>
</div>

@use 'sass:list';
@use 'sass:string';
@use 'sass:meta';
@use 'sass:map';

@use '~/src/styles/app.scss' as app;
@use '@nulllogic/scssleon/scss/mixins.scss' as mixins;
@use '@nulllogic/scssleon/scss/functions.scss' as functions;

$accordion: functions.get-theme(app.$theme, 'components.accordion');

@include mixins.generate-component(
    $accordion,
    'accordion',
    app.$config,
    app.$theme
);

Example 2

<div class="accordion">
    <div class="item">
        <div class="title">123</div>
        <div class="content">333</div>
    </div>
</div>

@use 'sass:list';
@use 'sass:string';
@use 'sass:meta';
@use 'sass:map';

@use '~/src/styles/app.scss' as app;
@use '@nulllogic/scssleon/scss/mixins.scss' as mixins;
@use '@nulllogic/scssleon/scss/functions.scss' as functions;

$accordion: functions.get-theme(app.$theme, 'components.accordion');

@include mixins.generate-component(
    $accordion,
    'accordion',
    app.$config,
    app.$theme
);

console.log(123);