Accordion

Css

Classe Elément Niveau Description
.accordion <ul> Parent Créer une liste dont le contenu est caché.
Le contenu d'un seul élément de la liste peut être affiché.
.accordionOpen <ul> Parent Créer une liste dont le contenu est visible.
Le contenu de tous les éléments de la liste peut être affiché.
.active <div> Enfant Afficher par défaut le contenu d'un élément d'un liste .accordion.

Javascript

Fonctions Description
sk.Accordion.init(container) Initialise les accordéons situés dans le conteneur.

Exemples

Simple

  • Accordion 1

    Content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Accordion 2

    Content 2

  • Accordion 3

    Content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<ul class="accordion">
    <li>
        <p>Accordion 1</p>
        <div>
            <p>Content 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
    <li>
        <p>Accordion 2</p>
        <div>
            <p>Content 2</p>
            <div class="slider sliderDots sliderNav sliderExpand sliderAuto" data-color="white">
                <div>
                    <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg">
                </div>
                <div>
                    <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg">
                </div>
                <div>
                    <img src="https://framework.surikat.fr/0.2/web/images/wallpapers/03.jpg">
                </div>
            </div>
        </div>
    </li>
    <li>
        <p>Accordion 3</p>
        <div>
            <p>Content 3</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
</ul>

AccordionOpen

  • Accordion 1

    Content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Accordion 2

    Content 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Accordion 3

    Content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<ul class="accordionOpen">
    <li>
        <p>Accordion 1</p>
        <div>
            <p>Content 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
    <li>
        <p>Accordion 2</p>
        <div>
            <p>Content 2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
    <li>
        <p>Accordion 3</p>
        <div>
            <p>Content 3</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
</ul>

Personalisation

  • Accordion 1

    Content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Accordion 2

    Content 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Exemple 3

    Content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<ul class="accordion">
    <li>
        <h4 class="green">Accordion 1</h4>
        <div>
            <p>Content 1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>

        </div>
    </li>
    <li>
        <h4 class="red">Accordion 2</h4>
        <div class="active">
            <p>Content 2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>

        </div>
    </li>
    <li>
        <h4 class="blue">Exemple 3</h4>
        <div>
            <p>Content 3</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        </div>
    </li>
</ul>

Multiligne

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.

    Content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Sed a felis et lacus tempus posuere.

    Content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

  • Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris.

    Content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.

<div class="containerXS">
    <ul class="accordion">
        <li>
            <p class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere.</p>
            <div>
                <p>Content 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
            </div>
        </li>
        <li>
            <p class="bold">Sed a felis et lacus tempus posuere.</p>
            <div>
                <p>Content 1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
            </div>
        </li>

        <li>
            <p class="bold">Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris.</p>
            <div>
                <p>Content 3</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
            </div>
        </li>
    </ul>
</div>