Créer un accordéon personnalisé - Aide Webflow

Comment ajouter un élément de liste déroulante

L'élément liste déroulante a des actions intégrées par défaut qui le rendent utile comme accordéon personnalisé — il ouvre la liste déroulante lorsqu'on clique dessus et la ferme lorsqu'un autre élément ou une autre partie de la page est cliqué.

Vous pouvez ajouter un élément de liste déroulante à votre site en allant dans le panneau Ajouter (A) > Éléments > Avancé et en faisant glisser l'élément liste déroulante sur le canevas.

Comment modifier les styles par défaut de la liste déroulante

Pour utiliser la liste déroulante dans votre accordéon personnalisé, vous devrez modifier les styles par défaut de l'élément liste déroulante. En particulier, vous devrez ajuster la largeur pour que la liste déroulante remplisse complètement l'espace de son élément parent (c'est-à-dire, quel que soit l'élément qui contient l'accordéon personnalisé).

Pour modifier les styles par défaut de la liste déroulante :

1. Sélectionnez l'élément parent liste déroulante sur le canevas du Designer (donné une classe de “Élément d'accordéon” pour cet exemple)
2. Allez dans le panneau Style > Taille
3. Réglez la Largeur sur 100%

Comment personnaliser votre bascule de liste déroulante

Maintenant, vous devrez personnaliser votre bascule de liste déroulante pour qu'elle remplisse complètement son élément parent et cache le contenu à l'intérieur de la liste déroulante lorsque l'accordéon est fermé. Ajustez les propriétés de display et hauteur de la bascule de liste déroulante :

1. Sélectionnez la bascule de liste déroulante sur le canevas et donnez-lui une classe (par exemple, “Bascule d'accordéon”)
2. Allez dans le panneau Style > Disposition
3. Réglez Display sur flexbox pour remplir l'espace horizontal
4. Réglez Aligner sur centre pour centrer verticalement le texte
5. Allez dans le panneau Style > Taille
6. Définissez une valeur de Hauteur (par exemple, 80px)

Comment styliser votre accordéon

Si vous prévisualisez votre site et cliquez sur votre accordéon, vous remarquerez peut-être que l'accordéon s'ouvre, mais le contenu par défaut chevauche le contenu autour. Cela se produit parce que le style de position par défaut pour la liste déroulante est absolu. Vous voudrez le changer pour que le contenu s'étende et déplace les éléments environnants.

Pour styliser votre accordéon :

1. Sélectionnez l'élément parent dropdown (par exemple, “Élément d'accordéon”)
2. Cliquez sur l'icône “cog” pour ouvrir les Paramètres de la liste déroulante et afficher le Menu
3. Sélectionnez l'élément Liste déroulante
4. Allez dans le Panneau de style > Position
5. Réglez la Position sur statique
6. Sélectionnez l'élément parent de la liste déroulante (“Élément d'accordéon”)
7. Allez dans le Panneau de style > Taille
8. Réglez Débordement sur caché

Comment créer votre animation personnalisée

Créez une animation personnalisée qui ouvre et ferme votre accordéon personnalisé :

• Créer des actions initiales
• Animer l'ouverture de l'accordéon
• Animer la fermeture de l'accordéon

Créer des actions initiales

Vous commencerez par créer deux actions initiales pour votre accordéon.

Pour votre liste déroulante :

1. Sélectionnez l'élément dropdown (“Élément d'accordéon”)
2. Allez dans le Panneau d'interactions > Déclencheur d'élément et créez un nouveau déclencheur d'élément
3. Choisissez Ouverture de la liste déroulante
4. Sélectionnez une action sous Ouverture du menu
5. Choisissez Démarrer une animation sous Animation personnalisée
6. Créez une animation chronométrée et nommez-la (par exemple, “Ouverture de l'accordéon”)
7. Ajoutez une action à votre animation : Taille sous Divers
8. Définissez comme état initial
9. Entrez une valeur de hauteur (par exemple, 80px)
10. Enregistrez

Pour votre icône de bascule :

1. Sélectionnez l'Icône dans l'élément de la liste déroulante
2. Donnez une classe à votre icône (par exemple, “Icône d'accordéon”)
3. Sélectionnez l'élément parent dropdown
4. Ouvrez le Panneau d'interactions
5. Sélectionnez l'interaction Ouverture de la liste déroulante
6. Modifiez l'animation chronométrée (“Ouverture de l'accordéon”)
7. Sélectionnez l'icône (“Icône d'accordéon”)
8. Ajoutez une action : Rotation sous Transformation
9. Définissez comme état initial
10. Réglez l'axe z sur 0 degrés
11. Enregistrez

Animer l'ouverture de l'accordéon

Pour ouvrir l'accordéon et faire pivoter l'icône :

1. Sélectionnez l'élément dropdown parent
2. Ouvrez le panneau d'interactions
3. Choisissez l'interaction Dropdown opens
4. Modifiez l'animation chronométrée (« Accordéon s'ouvre »)
5. Ajoutez une action : Taille sous Divers
6. Décochez l'état initial
7. Entrez « auto » pour la hauteur
8. Sélectionnez l'icône (« Icône d'accordéon »)
9. Ajoutez une action (au même moment) : Rotation sous Transformation
10. Réglez l'axe z à 180 degrés
11. Enregistrez

Animer la fermeture de l'accordéon

Pour animer la fermeture :

1. Sélectionnez l'élément dropdown parent (« Élément d'accordéon »)
2. Ouvrez le panneau d'interactions
3. Choisissez l'interaction Dropdown opens
4. Sélectionnez l'action sous Menu closes
5. Choisissez Démarrer l'animation
6. Créez une animation chronométrée et nommez-la (par exemple, « Accordéon se ferme »)
7. Ajoutez une action : Taille sous Divers
8. Entrez la valeur de hauteur (par exemple, 80px)
9. Sélectionnez l'icône
10. Ajoutez une action (même moment) : Rotation sous Transformation
11. Réglez l'axe z à 0 degrés
12. Enregistrez

Retour à l'aide de webflow