Softonic

Générateur d’accordéon CSS

Étape 1 / 4 Contenu

Contenu de l’accordéon

Saisissez des titres et des panneaux en texte brut. Le texte ressemblant à du HTML est échappé dans le code généré.

Le texte et les réglages restent dans cet onglet. Ils ne sont ni envoyés par Livewire, ni placés dans l’URL, ni téléversés. La fermeture de l’onglet efface l’état temporaire du parcours.

Créez un accordéon de trois sections avec les éléments sémantiques <details> et <summary>. Saisissez des titres et des panneaux en texte brut, personnalisez le style, testez le clavier, puis copiez le HTML et le CSS échappés ou téléchargez un fichier autonome. Tout reste dans l’onglet du navigateur.

Comment créer un accordéon CSS

  1. 1

    Rédiger trois sections

    Ajoutez un titre court et un panneau en texte brut à chaque section. Le texte ressemblant à du HTML est échappé.

  2. 2

    Choisir le style

    Réglez quatre couleurs hexadécimales, un rayon de 0 à 24 px et un espacement intérieur de 8 à 32 px.

  3. 3

    Définir l’ouverture

    Autorisez plusieurs panneaux ou utilisez l’attribut `name` natif pour un groupe exclusif. Choisissez un chevron ou plus/moins.

  4. 4

    Tester et exporter

    Testez l’aperçu au pointeur et au clavier, puis copiez le code ou téléchargez un fichier HTML UTF-8.

Code produit

Chaque section est un élément <details> avec un <summary> et un panneau. Le CSS règle les couleurs, la bordure, le focus, les espacements, les angles et l’indicateur. Il utilise des propriétés logiques pour les pages de droite à gauche et désactive la transition si l’utilisateur demande moins d’animations.

Le mode plusieurs panneaux ne génère aucun attribut name. Le mode un seul panneau attribue le même name="generated-accordion" aux trois éléments. Les anciens navigateurs qui ne prennent pas en charge les groupes exclusifs conservent des panneaux indépendants utilisables.

Les titres et panneaux sont toujours traités comme du texte. Les chevrons, esperluettes, guillemets et apostrophes sont échappés, donc une balise collée ne s’exécute pas. Ajoutez vous-même du balisage fiable après l’export si nécessaire.

Les textes et réglages ne sont pas envoyés au serveur. Le parcours en plusieurs pages utilise seulement sessionStorage dans l’onglet courant et ne place pas le contenu dans l’URL. Fermer l’onglet efface cet état.

Questions fréquentes

Non. L’ouverture repose sur le comportement natif de <details> et <summary>. Le fichier exporté contient uniquement du HTML et du CSS.

Oui. Le mode exclusif donne le même attribut name aux trois éléments details dans les navigateurs compatibles.

Non dans l’éditeur : le contenu est volontairement échappé comme texte. Ajoutez du balisage vérifié après l’export.

Non. La saisie, l’aperçu, la copie et le téléchargement restent dans l’onglet du navigateur.

Outils similaires

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Convertisseur binaire en ASCII

Collez du binaire (octets séparés par des espaces ou un long flux de bits) et obtenez le texte ASCII qu'il représente. Gère les encodages de 7 bits et 8 bits.

Convertisseur BBCode en HTML

Convertissez le BBCode (balisage de forum) en HTML propre. Gère les balises de formatage, les listes, les citations, le code, les images, les liens et les tableaux.

Convertisseur binaire en octal

Convertissez le binaire en octal en regroupant les bits trois par trois. Utile pour les permissions Unix, les systèmes hérités et l'affichage numérique compact.

Convertisseur Base64 en Hex

Convertissez une chaîne Base64 en ses octets sous-jacents exprimés en hexadécimal. Utile pour inspecter des jetons, des clés, des certificats et des JWT.

Sélecteur de couleur HEX

Choisissez ou saisissez une couleur HEX et obtenez RGB, HSL, CMYK estimé, luminance relative et contraste sur blanc et noir.