Accentsconagua

Hoe een accordeoncomponent te bouwen met CSS en een vleugje JavaScript

Web ontwerp
Share

In de tutorial van vandaag leren we hoe we een show- / hide-component kunnen bouwen met CSS en een beetje JavaScript. Standaard biedt jQuery de slideToggle methode waarmee we accordeons kunnen maken met een glijdende beweging. Onze uitdaging is om deze functionaliteit na te bootsen met pure JavaScript.

Dit is het component dat we gaan maken:

Notitie: dit is de functionaliteit die wordt geboden door de

en elementen, hoewel deze nog niet genieten van ondersteuning in Microsoft-browsers. 

  • De elementen "Details" en "Samenvatting" uitleggen

    Veel JavaScript-bibliotheken zijn ontwikkeld om ons extra interactieve widgets op websites te geven. HTML5 heeft ook een aantal populaire ...
    Thoriq Firdaus
    HTML5

1. De HTML

Om te beginnen definiëren we een element met de klasse van houder welke twee sub-elementen bevat:

  • de knop die de inhoud zal verbergen en onthullen (inclusief een inline SVG-pictogram)
  • de feitelijke inhoud

Dit is hoe dat eruit ziet:

2. De CSS

De CSS is vrij eenvoudig. We moeten twee helperklassen definiëren (d.w.z.. verbergen en laten zien). 

Om het doelelement te verbergen en te onthullen, gebruiken we het hoogte property, maar we zullen de waarden ervan niet specificeren in CSS. In plaats daarvan stellen we de hoogtewaarden dynamisch in via JavaScript. 

Een ding om op te merken is dat we geen gebruik maken van de tonen eigendom voor het schakelen tussen de zichtbaarheid van onze inhoud. Die eigenschap telt niet mee onder de animeerbare CSS-eigenschappen.

Dit zijn de bijbehorende CSS-stijlen:

.verbergen display: none; . laat display: flex;  .info overloop: verborgen; overgang: hoogte .5s;

3. Het JavaScript

Nu is het tijd om te bespreken hoe onze JavaScript-code zou moeten werken.

Ten eerste, zodra de DOM klaar is, krijgen we de hoogte van de .info element en stel onmiddellijk de waarde in op 0.

const info = document.querySelector (". info"); laat infoHeight = info.offsetHeight; info.style.height = 0;

Houd er rekening mee dat afhankelijk van uw inhoud (bijvoorbeeld als deze afbeeldingen bevat) de bovenstaande code mogelijk moet worden ingesloten in de laden evenement.

Vervolgens, wanneer de .schakelen-btn knop is aangeklikt, doen we het volgende:

  • Schakel de zichtbaarheid van de .minder en .meer elementen.
  • Herbereken de hoogte van de .info element. Als het 0 is (aanvankelijk geven we het deze waarde), betekent dit dat de inhoud verborgen is. We onthullen het door de hoogte in te stellen die gelijk is aan de oorspronkelijke hoogte (opgeslagen in de infoHeight variabel). Aan de andere kant als de inhoud zichtbaar is, verbergen we deze door de hoogte in te stellen op 0.
  • Optioneel zorgen wij ervoor dat de .schakelen-btn wordt slechts één keer geklikt totdat de dia-animatie is voltooid (deze duurt 500 ms). 

Hier is de code die al dat gedrag implementeert:

const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const minder = document.querySelector (". less"); const more = document.querySelector (". more"); // initiële hoogte laat infoHeight = info.offsetHeight; toggleBtn.addEventListener ("klik", functie () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") ; less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; if (infoNewHeight == 0) info.style.height = '$ infoHeight px'; else info.style.height = 0; setTimeout (() => this.disabled = false;, 500););

Browser Resize

De volgende stap is om ervoor te zorgen dat het onderdeel correct zal werken naarmate het formaat van het browservenster verandert. 

Hier is de benodigde JS-code:

// variabele definities hier window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide")) info .style.height = '$ infoHeight px'; else info.style.height = 0;);

4. Browserondersteuning

Onze demo zou goed moeten werken in alle recente browsers en apparaten. Ook gebruiken we zoals gebruikelijk Babel om de ES6-code te compileren tot ES5. 

Conclusie

In deze korte tutorial hebben we een show / hide-component in accordeonstijl gebouwd met CSS en JavaScript. Dank aan de animatable hoogte property hebben we een slide-in / slide-out effect toegevoegd aan onze component. 

We hebben met name de toegankelijkheid niet overwogen, dus als u de functionaliteit wilt verbeteren, kan dit zeker de volgende stap zijn.

Meer zelfstudies "Met een vleugje JavaScript"


Web ontwerp
×