Skip to main content

Accordéons

Description

  • Classes CSS ajoutées sur le heading et sur le content lors de l'ouverture.
  • Height sur auto lors de l'ouverture afin de permettre le resize ou l'ajout de contenu dynamiquement.
  • Fonctionnalités simples et faciles à modifier pour votre projet.

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, elit sit amet suscipit tincidunt, risus justo volutpat odio, vitae sodales velit nulla id mi. Nulla vel venenatis quam, eget mollis est. Fusce ligula elit, commodo a ornare in, varius vitae lacus. Morbi nulla diam, blandit in tempus tristique, imperdiet ac ante. Quisque eu finibus augue. Duis justo sapien, dignissim eget tortor et, interdum mattis mauris. Fusce hendrerit vel risus in porttitor. Vivamus eleifend pellentesque orci eu imperdiet. Maecenas eleifend sem nec aliquet maximus. Vivamus tempor mauris non sapien aliquam elementum. Ut urna diam, pellentesque at egestas aliquam, scelerisque ac erat.

Duis justo sapien, dignissim eget tortor et, interdum mattis mauris. Fusce hendrerit vel risus in porttitor. Vivamus eleifend pellentesque orci eu imperdiet. Maecenas eleifend sem nec aliquet maximus. Vivamus tempor mauris non sapien aliquam elementum. Ut urna diam, pellentesque at egestas aliquam, scelerisque ac erat.

Duis justo sapien, dignissim eget tortor et. Interdum mattis mauris. Fusce hendrerit vel risus in porttitor.

Documentation

Importez la fonction dans votre projet

import { Accordions } from "./functions/accordions-constructor.js"

Créez et initialisez une instance

Hint : si tous les blocs d'accordéons de votre site ont les mêmes options, vous créez une seule instance.

const myAccordions = new Accordions(".accordions", {
  // your options here - see options below
})
// init your newly created instance
myAccordions.init()

Options

  • Name
    Type
    Default
    Description
  • headingSelector
    CSS selector
    ".accordions__heading"
  • headingActiveClass
    string
    "accordions__heading--active"
  • contentOpenClass
    string
    "accordions__content--open"
  • alternateMode
    Boolean
    false
    Ferme les accordéons ouverts lorsqu'on clique sur un nouveau

Code

Dossier de base

Dossier complet

Éléments partagés requis

Fonctions Collapse