In deze blog, ga ik een accordeon te maken met behulp van native javascript. Geen bibliotheek zoals jQuery nodig is. JQueryUI heeft een ingebouwde accordeon component, die is geweldig om te gebruiken. Maar als een verantwoordelijke ontwikkelaar, moeten we ook weten hoe je er een te maken met pure javascript. Als u niet weet wat accordion is dan kijk jquery een hier.
Laten we breken de component in kleinere stappen.
- Accordion bevat lijst van panelen.
- Elk paneel heeft twee componenten, header & lichaam.
- Header component van alle paneel is altijd zichtbaar.
- Een paneel kan worden uitgebreid of samengevouwen.
- Wanneer een paneel wordt uitgebreid, wordt de body component zichtbaar.
- Een paneel kan tegelijk worden uitgevouwen.
- Wanneer een ander paneel wordt uitgevouwen, wordt de body-component van het laatste paneel verborgen.
Laten we de component met kleine stapjes bouwen.
Stap1 :- Ontwerp basis HTML
Laten we eens wat basis html die lijst van panelen met header & body.
Het bovenstaande html bevat lijst van paneel. Elk paneel heeft een header en body item. Op dit moment is alles zichtbaar.
Step2 :- Definieer een aantal CSS om de zichtbaarheid
Laten we twee CSS-klassen om de zichtbaarheid van de body definiëren.
Standaard willen we alle body van het paneel te verbergen als per de eis. Nu moeten we alleen uitgebreide element tegelijk laten zien. Wij zullen de actieve klasse in de div van het paneel toevoegen om de body zichtbaar te maken.
Step3 :- Gebruik van CSS in de HTML
Na het toevoegen van CSS in onze HTML, zal de code
Nu is de body van het paneel verborgen behalve de eerste. We hebben onze basis accordeon component gemaakt. We moeten wat javascript gebruiken om het volledig functioneel te maken.
Step4 :- Click-events toevoegen
We zullen click-events toevoegen aan elk paneel, waardoor de zichtbaarheid van het paneel verandert.
JS Fiddle link hier
initAccordion functie is gedefinieerd om de accordeon component te initialiseren. Het zet een klik gebeurtenis op elk paneel. Wanneer op een paneel wordt geklikt, wordt de actieve klasse van het huidige actieve paneel verwijderd en aan het nieuwe paneel toegevoegd. Standaard wordt het eerste paneel actief gemaakt. We kunnen elk panel standaard actief maken door het panel element door te geven aan de showPanel functie.
We hebben onze accordeon succesvol gemaakt. Dit is slechts een zeer basis model van accordeon, maar het dekt de belangrijkste functionaliteit.
We kunnen het meer fancy door het toevoegen van mooie css stijlen, animatie en pictogrammen. Ook kunnen we het meer prestatiegericht door het implementeren van event delegatie & caching huidige actieve elementen. Zie mijn blog over gebeurtenissen om te leren over gebeurtenissen in detail.