FR | EN
Installer
Documentation

Documentation - Accordion / FAQ.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Accordion / FAQ

Les accordéons (ou FAQ) permettent d'organiser du contenu en sections pliables et dépliables, idéales pour les questions fréquentes, les menus de navigation ou tout contenu hiérarchique. Marssel propose une implémentation pure CSS sans JavaScript, utilisant des inputs checkbox ou radio pour gérer l'ouverture et la fermeture des sections avec des animations fluides.

Style CSS

Ajoutez ce style à votre feuille de style : 

/* Styles de base nécessaires */
.accordion-checkbox {
  display: none;
}

/* Rotation de l'icône quand ouvert */
.accordion-checkbox:checked + .accordion-header .accordion-icon {
  transform: rotate(45deg); /* Pour le "+" */
  /* ou rotate(180deg) pour une flèche ▼ */
}

/* Ouverture du contenu */
.accordion-checkbox:checked ~ .accordion-content {
  max-height: 500px; /* Ajustez selon votre contenu */
}

/* Fermeture du contenu par défaut */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

Accordion basique

Aperçu

Réponse à la question 1.

<div class="accordion">
    <div class="accordion-item mb-[10px]">
        <input type="checkbox" id="accordion-1" class="accordion-checkbox">

        <label for="accordion-1"
            class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[f5f5f5] rounded-[5px] bg-[e0e0e0]:hover transition-[0.3s]">
            <span class="accordion-title fw-[600]">Question 1</span>
            <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
        </label>

        <div class="accordion-content">
            <div class="accordion-body p-[20px] border-[1px_solid_dddddd] rounded-b-[5px]">
                <p>Réponse à la question 1.</p>
            </div>
        </div>
    </div>
</div>

Plusieurs sections (checkbox)

Aperçu

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Pour utiliser cet accordéon :

  1. Copiez la structure HTML
  2. Utilisez les classes Marssel pour personnaliser
  3. Aucun JavaScript nécessaire

Oui, totalement responsive avec les breakpoints Marssel.

<!-- Permet d'ouvrir plusieurs sections simultanément -->
<div class="accordion">
    <!-- Item 1 -->
    <div class="accordion-item mb-[10px]">
        <input type="checkbox" id="faq-1" class="accordion-checkbox">
        <label for="faq-1"
        class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[f5f5f5] rounded-[5px] mb-[2px] bg-[e0e0e0]:hover transition-[0.3s]">
        <span class="accordion-title fw-[600]">Comment utiliser cet accordéon ?</span>
        <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
    </label>
    <div class="accordion-content">
        <div class="accordion-body p-[20px] border-[1px_solid_dddddd] rounded-b-[5px]">
            <p class="m-[0] mb-[10px]">Pour utiliser cet accordéon :</p>
            <ol class="pl-[20px] mt-[10px]">
                <li class="mb-[5px]">Copiez la structure HTML</li>
                <li class="mb-[5px]">Utilisez les classes Marssel pour personnaliser</li>
                <li class="mb-[5px]">Aucun JavaScript nécessaire</li>
            </ol>
        </div>
    </div>
</div>

<!-- Item 2 -->
<div class="accordion-item mb-[10px]">
    <input type="checkbox" id="faq-2" class="accordion-checkbox">
    <label for="faq-2"
    class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[f5f5f5] rounded-[5px] mb-[2px] bg-[e0e0e0]:hover transition-[0.3s]">
    <span class="accordion-title fw-[600]">Est-ce responsive ?</span>
    <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
</label>
<div class="accordion-content">
    <div class="accordion-body p-[20px] border-[1px_solid_dddddd] rounded-b-[5px]">
        <p class="m-[0]">Oui, totalement responsive avec les breakpoints Marssel.</p>
    </div>
</div>
</div>

Une seule section ouverte (radio)

Aperçu
Contenu de la section 1.
Quand vous ouvrez cette section, les autres se ferment automatiquement. 
<!-- Une seule section peut être ouverte à la fois -->
<div class="accordion-group">
    <!-- Item 1 -->
    <div class="accordion-item mb-[10px]">
        <input type="radio" name="accordion-radio" id="radio-1" class="accordion-checkbox" checked>
        <label for="radio-1" class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[e6f7ff] rounded-[5px] mb-[2px] bg-[c0e3ff]:hover transition-[0.3s]">
            <span class="accordion-title fw-[600]">Section 1</span>
            <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
        </label>
        <div class="accordion-content">
            <div class="accordion-body p-[20px] border-[1px_solid_d1ebff] rounded-b-[5px]">
                Contenu de la section 1.
            </div>
        </div>
    </div>

    <!-- Item 2 -->
    <div class="accordion-item mb-[10px]">
        <input type="radio" name="accordion-radio" id="radio-2" class="accordion-checkbox">
        <label for="radio-2" class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[e6f7ff] rounded-[5px] mb-[2px] bg-[c0e3ff]:hover transition-[0.3s]">
            <span class="accordion-title fw-[600]">Section 2</span>
            <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
        </label>
        <div class="accordion-content">
            <div class="accordion-body p-[20px] border-[1px_solid_d1ebff] rounded-b-[5px]">
                Quand vous ouvrez cette section, les autres se ferment automatiquement.
            </div>
        </div>
    </div>
</div>

Accordion responsive

Aperçu

Le padding et la taille de police s'adaptent selon la taille d'écran. 

<div class="accordion-item mb-[10px]">
    <input type="checkbox" id="responsive-1" class="accordion-checkbox">

    <!-- Header responsive : taille et fond changent selon breakpoint -->
    <label for="responsive-1"
            class="accordion-header d-[flex] justify-[space-between] items-[center] py-[15px] px-[20px] cursor-[pointer] bg-[f5f5f5] md--bg-[eaeaea] rounded-[5px] mb-[2px] bg-[e0e0e0]:hover transition-[0.3s]">
        <span class="accordion-title fw-[600] font-size-[16px] md--font-size-[18px]">
        Question responsive
        </span>
        <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[20px] md--font-size-[24px]">+</span>
    </label>

    <div class="accordion-content">
        <div class="accordion-body p-[15px] md--p-[20px] border-[1px_solid_dddddd] rounded-b-[5px]">
        <p class="m-[0] font-size-[14px] md--font-size-[16px]">
            Le padding et la taille de police s'adaptent selon la taille d'écran.
        </p>
        </div>
    </div>
</div>

Accordion avec icônes

Aperçu

Réponse avec un style moderne et des bordures colorées.

<div class="accordion-item mb-[10px]">
    <input type="checkbox" id="icon-1" class="accordion-checkbox">
    <label for="icon-1"
            class="accordion-header d-[flex] justify-[space-between] items-[center] py-[18px] px-[24px] cursor-[pointer] bg-[fff] border-[2px_solid_e0e0e0] rounded-[8px] border-[2px_solid_0B63F3]:hover transition-[0.3s]">
        <span class="d-[flex] items-[center] gap-[12px]">
        <span class="icon---[w-[24px]+h-[24px]+bg-[0B63F3]+rounded-[50%]]"></span>
        <span class="accordion-title fw-[600] c-[333]">Question avec icône</span>
        </span>
        <span class="accordion-icon-arrow d-[inline-block] transition-[0.3s] font-size-[24px] c-[0B63F3]">▼</span>
    </label>
    <div class="accordion-content">
        <div class="accordion-body p-[24px] bg-[f8f9fa] border-[2px_solid_e0e0e0] border-t-[none] rounded-b-[8px]">
        <p class="m-[0] c-[555]">Réponse avec un style moderne et des bordures colorées.</p>
        </div>
    </div>
</div>

Accordion coloré

Aperçu

Contenu avec un header coloré en dégradé.

<div class="accordion-item mb-[10px]">
    <input type="checkbox" id="c-1" class="accordion-checkbox">
    <label for="c-1"
            class="accordion-header d-[flex] justify-[space-between] items-[center] py-[16px] px-[20px] cursor-[pointer] bg-linear-[90deg,0B63F3_0%,8b5cf6_100%] c-[white] rounded-[8px] shadow-[0_2px_8px_rgba(59,130,246,0.3)] transition-[0.3s]">
        <span class="accordion-title fw-[600]">Question avec dégradé</span>
        <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px]">+</span>
    </label>
    <div class="accordion-content">
        <div class="accordion-body p-[20px] bg-[f0f7ff] border-[1px_solid_d1ebff] border-t-[none] rounded-b-[8px]">
        <p class="m-[0] c-[333]">Contenu avec un header coloré en dégradé.</p>
        </div>
    </div>
</div>

Accordion minimaliste

Aperçu

Design épuré sans bordures ni fond coloré.

<div class="accordion-item mb-[8px]">
    <input type="checkbox" id="minimal-1" class="accordion-checkbox">
    <label for="minimal-1"
        class="accordion-header d-[flex] justify-[space-between] items-[center] py-[12px] px-[0] cursor-[pointer] border-b-[1px_solid_e0e0e0] transition-[0.3s]">
        <span class="accordion-title fw-[500] c-[333]">Question minimaliste</span>
        <span class="accordion-icon-arrow d-[inline-block] transition-[0.3s] font-size-[20px] c-[5C6F8A]">↓</span>
    </label>
    <div class="accordion-content">
        <div class="accordion-body py-[16px] px-[0]">
            <p class="m-[0] c-[666] line-h-[1d6]">Design épuré sans bordures ni fond coloré.</p>
        </div>
    </div>
</div>

FAQ complète

Aperçu

Questions Fréquentes

Marssel est un framework CSS moderne qui permet de créer des interfaces élégantes avec une syntaxe intuitive et compacte.

Installation via npm :

npm install @marssel-vb/marssel

Oui, Marssel est compatible avec tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). 

<div class="faq-container---[max-w-[800px]+mx-[auto]+p-[20px]]">
    <h2 class="text-align-[center] mb-[32px] font-size-[28px] font-weight-[700]">
        Questions Fréquentes
    </h2>

    <div class="accordion">
        <!-- Question 1 -->
        <div class="accordion-item mb-[12px]">
            <input type="checkbox" id="faq-complete-1" class="accordion-checkbox">
            <label for="faq-complete-1" class="accordion-header d-[flex] justify-[space-between] items-[center] py-[18px] px-[24px] cursor-[pointer] bg-[fff] border-[1px_solid_e0e0e0] rounded-[8px] shadow-[0_2px_4px_rgba(0,0,0,0.05)] bg-[f8f9fa]:hover transition-[0.3s]">
                <span class="accordion-title fw-[600] c-[333] font-size-[16px]">
                    Qu'est-ce que Marssel ?
                </span>
                <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px] c-[0B63F3]">+</span>
            </label>
            <div class="accordion-content">
                <div class="accordion-body p-[24px] border-[1px_solid_e0e0e0] border-t-[none] rounded-b-[8px]">
                    <p class="m-[0] c-[555] line-h-[1d6]">
                        Marssel est un framework CSS moderne qui permet de créer des interfaces élégantes avec une syntaxe intuitive et compacte.
                    </p>
                </div>
            </div>
        </div>

        <!-- Question 2 -->
        <div class="accordion-item mb-[12px]">
            <input type="checkbox" id="faq-complete-2" class="accordion-checkbox">
            <label for="faq-complete-2" class="accordion-header d-[flex] justify-[space-between] items-[center] py-[18px] px-[24px] cursor-[pointer] bg-[fff] border-[1px_solid_e0e0e0] rounded-[8px] shadow-[0_2px_4px_rgba(0,0,0,0.05)] bg-[f8f9fa]:hover transition-[0.3s]">
                <span class="accordion-title fw-[600] c-[333] font-size-[16px]">
                    Comment installer Marssel ?
                </span>
                <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px] c-[0B63F3]">+</span>
            </label>
            <div class="accordion-content">
                <div class="accordion-body p-[24px] border-[1px_solid_e0e0e0] border-t-[none] rounded-b-[8px]">
                    <p class="m-[0] mb-[10px] c-[555] line-h-[1d6]">
                        Installation via npm :
                    </p>
                    <code class="d-[block] bg-[f5f5f5] p-[12px] rounded-[4px] font-size-[14px]">
                        npm install @marssel-vb/marssel
                    </code>
                </div>
            </div>
        </div>

        <!-- Question 3 -->
        <div class="accordion-item mb-[12px]">
            <input type="checkbox" id="faq-complete-3" class="accordion-checkbox">
                <label for="faq-complete-3" class="accordion-header d-[flex] justify-[space-between] items-[center] py-[18px] px-[24px] cursor-[pointer] bg-[fff] border-[1px_solid_e0e0e0] rounded-[8px] shadow-[0_2px_4px_rgba(0,0,0,0.05)] bg-[f8f9fa]:hover transition-[0.3s]">
                <span class="accordion-title fw-[600] c-[333] font-size-[16px]">
                    Est-ce compatible avec tous les navigateurs ?
                </span>
                <span class="accordion-icon d-[inline-block] transition-[0.3s] font-size-[24px] c-[0B63F3]">+</span>
            </label>
            <div class="accordion-content">
                <div class="accordion-body p-[24px] border-[1px_solid_e0e0e0] border-t-[none] rounded-b-[8px]">
                    <p class="m-[0] c-[555] line-h-[1d6]">
                        Oui, Marssel est compatible avec tous les navigateurs modernes (Chrome, Firefox, Safari, Edge).
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
← Précédent Tabs
Suivant → Pagination

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).