Maak een aangepaste accordeon - Webflow hulp

Hoe voeg je een dropdown-element toe

Het dropdown-element heeft standaard ingebouwde acties die het nuttig maken als een aangepaste accordeon — het opent de dropdownlijst wanneer erop wordt geklikt en sluit het wanneer een ander element of deel van de pagina wordt aangeklikt.

Je kunt een dropdown-element aan je site toevoegen door naar Toevoegen paneel (A) > Elementen > Geavanceerd te gaan en het dropdown-element naar het canvas te slepen.

Hoe verander je de standaard dropdown-stijlen

Om de dropdown in je aangepaste accordeon te gebruiken, moet je de standaard dropdown-elementstijlen wijzigen. In het bijzonder moet je de breedte aanpassen zodat de dropdown de ruimte van zijn bovenliggende element volledig vult (d.w.z. welk element de aangepaste accordeon ook bevat).

Om de standaard dropdown-stijlen te wijzigen:

1. Selecteer het bovenliggende dropdown-element op het Designer-canvas (gegeven een klasse van “Accordeon item” voor dit voorbeeld)
2. Ga naar Stijl paneel > Grootte
3. Stel Breedte in op 100%

Hoe pas je je dropdown-toggle aan

Nu moet je je dropdown-toggle aanpassen zodat deze zijn bovenliggende element volledig vult en de inhoud binnen de dropdownlijst verbergt wanneer de accordeon is gesloten. Pas de weergave- en hoogte-eigenschappen van de dropdown-toggle aan:

1. Selecteer de dropdown-toggle op het canvas en geef het een klasse (bijv. “Accordeon toggle”)
2. Ga naar Stijl paneel > Indeling
3. Stel Weergave in op flexbox om de horizontale ruimte te vullen
4. Stel Uitlijnen in op midden om de tekst verticaal te centreren
5. Ga naar Stijl paneel > Grootte
6. Stel een Hoogte-waarde in (bijv. 80px)

Hoe je je accordeon kunt stylen

Als je je site bekijkt en op je accordeon klikt, merk je misschien dat de accordeon opent, maar de standaardinhoud overlapt de inhoud eromheen. Dit gebeurt omdat de standaard positie stijl voor de dropdownlijst absoluut is. Je wilt dit veranderen zodat de inhoud zich uitbreidt en omliggende elementen verschuift.

Om je accordeon te stylen:

1. Selecteer het ouder dropdown element (bijv. “Accordeon item”)
2. Klik op het “tandwiel” icoon om Dropdown instellingen te openen en het Menu te tonen
3. Selecteer het Dropdown lijst element
4. Ga naar Stijl paneel > Positie
5. Stel Positie in op statistisch
6. Selecteer het ouder dropdown element (“Accordeon item”)
7. Ga naar Stijl paneel > Grootte
8. Stel Overloop in op verborgen

Hoe je je eigen animatie kunt maken

Maak een aangepaste animatie die je aangepaste accordeon opent en sluit:

• Maak initiële acties
• Animeer het openen van de accordeon
• Animeer het sluiten van de accordeon

Maak initiële acties

Je begint met het maken van twee initiële acties voor je accordeon.

Voor je dropdown:

1. Selecteer het dropdown element (“Accordeon item”)
2. Ga naar Interactie paneel > Element trigger en maak een nieuwe element trigger
3. Kies Dropdown opent
4. Selecteer een actie onder Menu opent
5. Kies Start een animatie onder Aangepaste animatie
6. Maak een getimede animatie en geef het een naam (bijv. “Accordeon opent”)
7. Voeg een actie toe aan je animatie: Grootte onder Diversen
8. Stel in als initiële staat
9. Voer een hoogte waarde in (bijv. 80px)
10. Opslaan

Voor je toggle icoon:

1. Selecteer het Icoon binnen het dropdown element
2. Geef je icoon een klasse (bijv. “Accordeon icoon”)
3. Selecteer ouder dropdown element
4. Open Interactie paneel
5. Selecteer Dropdown opent interactie
6. Bewerk de getimede animatie (“Accordeon opent”)
7. Selecteer het icoon (“Accordeon icoon”)
8. Voeg actie toe: Draaien onder Transformeren
9. Stel in als initiële staat
10. Stel z-as in op 0 graden
11. Opslaan

Animeren van het openen van de accordeon

Om de accordeon te openen en het pictogram te draaien:

1. Selecteer het ouder dropdown element
2. Open het Interactiepaneel
3. Kies de interactie Dropdown opent
4. Bewerk de getimede animatie (“Accordeon opent”)
5. Voeg actie toe: Grootte onder Diversen
6. Vink de beginstatus uit
7. Voer “auto” in voor hoogte
8. Selecteer pictogram (“Accordeon pictogram”)
9. Voeg actie toe (op dezelfde tijdstempel): Draaien onder Transformeren
10. Stel z-as in op 180 graden
11. Opslaan

Animeren van het sluiten van de accordeon

Om het sluiten te animeren:

1. Selecteer het ouder dropdown element (“Accordeon item”)
2. Open het Interactiepaneel
3. Kies de interactie Dropdown opent
4. Selecteer actie onder Menu sluit
5. Kies Start animatie
6. Maak een getimede animatie en geef het een naam (bijv. “Accordeon sluit”)
7. Voeg actie toe: Grootte onder Diversen
8. Voer hoogtewaarde in (bijv. 80px)
9. Selecteer pictogram
10. Voeg actie toe (zelfde tijdstempel): Draaien onder Transformeren
11. Stel z-as in op 0 graden
12. Opslaan

Terug naar webflow help