FR | EN
Install
Documentation

Documentation - Accordion / FAQ.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Accordion / FAQ

Accordions (or FAQs) allow you to organize content into collapsible and unfoldable sections, ideal for frequently asked questions, navigation menus or any hierarchical content. Marssel offers a pure CSS implementation without JavaScript, using checkbox or radio inputs to manage the opening and closing of sections with fluid animations.

CSS styling

Add this style to your stylesheet: 

/* Basic Styles Needed */
.accordion-checkbox {
  display: none;
}

/* Icon rotation when opened */
.accordion-checkbox:checked + .accordion-header .accordion-icon {
  transform: rotate(45deg); /* Pour le "+" */
  /* ou rotate(180deg) pour une flèche ▼ */
}

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

/* Closing content by default */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

Basic accord

Preview

Answer to 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>Answer to question 1.</p>
            </div>
        </div>
    </div>
</div>

Several sections (checkbox)

Preview

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

To use this accordion:

  1. Copy the HTML structure
  2. Use Marsl classes to customize
  3. No JavaScript needed

Yes, fully responsive with Marsel breakpoints.

<!-- Allows you to open several sections simultaneously -->
<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]">How to use this accordion?</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]">To use this accordion:</p>
            <ol class="pl-[20px] mt-[10px]">
                <li class="mb-[5px]">Copy the HTML structure</li>
                <li class="mb-[5px]">Use Marsl classes to customize</li>
                <li class="mb-[5px]">No JavaScript needed</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]">Is it 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]">Yes, fully responsive with Marsel breakpoints.</p>
    </div>
</div>
</div>

Only one section open (radio)

Preview
Contents of section 1.
When you open this section, the others close automatically. 
<!-- Only one section can be opened at a time -->
<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]">
                Contents of 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]">
                When you open this section, the others close automatically.
            </div>
        </div>
    </div>
</div>

Responsive Accordion

Preview

The padding and font size adapt according to the screen size. 

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

    <!-- Responsive header: size and background change according to 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]">
        Responsive question
        </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]">
            The padding and font size adapt according to the screen size.
        </p>
        </div>
    </div>
</div>

Accordion with icons

Preview

Answer with modern style and colorful borders.

<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 with icon</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]">Answer with modern style and colorful borders.</p>
        </div>
    </div>
</div>

Colorful accordion

Preview

Content with a colored gradient header.

<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 with gradient</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]">Content with a colored gradient header.</p>
        </div>
    </div>
</div>

Minimalist accordion

Preview

Clean design without borders or colored backgrounds.

<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]">Minimalist question</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]">Clean design without borders or colored backgrounds.</p>
        </div>
    </div>
</div>

Complete FAQ

Preview

Frequently Asked Questions

Marssel is a modern CSS framework that allows you to create elegant interfaces with an intuitive and compact syntax.

Installing via npm:

npm install @marssel-vb/marssel

Yes, Marssel is compatible with all modern browsers (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]">
        Frequently Asked Questions
    </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]">
                    What is Marsel?
                </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 is a modern CSS framework that allows you to create elegant interfaces with an intuitive and compact syntax.
                    </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]">
                    How to install Marsel?
                </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]">
                        Installing 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]">
                    Is it compatible with all browsers?
                </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]">
                        Yes, Marssel is compatible with all modern browsers (Chrome, Firefox, Safari, Edge).
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
← Previous Tabs
Next → Paging

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).