Accentsconagua

Slik bygger du en Accordion-komponent med CSS og en Touch of JavaScript

Webdesign
Share

I dagens veiledning lærer vi hvordan å bygge en show / hide komponent med CSS og en liten bit av JavaScript. Som standard gir jQuery slideToggle metode som gjør at vi kan lage trekkspill med glidende bevegelse. Vår utfordring er å etterligne denne funksjonaliteten med rent JavaScript.

Her er komponenten vi skal skape:

Merk: Dette er funksjonalitet som er levert av

og elementer, selv om disse ennå ikke nyter støtte i Microsoft-nettlesere. 

  • Forklarer "Detaljer" og "Sammendrag" Elementer

    Mange JavaScript-biblioteker er utviklet for å gi oss flere interaktive widgets på nettsteder. På samme måte har HTML5 også tolket en rekke populære ...
    Thoriq Firdaus
    HTML5

1. HTML

Til å begynne med definerer vi et element med klassen av container som inneholder to delelementer:

  • knappen som vil gjemme og avsløre innholdet (inkludert et inline SVG-ikon)
  • det faktiske innholdet

Her ser det ut som:

2. CSS

CSS er ganske grei. Vi må definere to hjelperklasser (dvs.. gjemme seg og vise fram). 

For å skjule og avsløre målelementet bruker vi høyde eiendom, men vi vil ikke spesifisere sine verdier i CSS. I stedet vil vi dynamisk sette høydeverdiene gjennom JavaScript. 

En ting å merke seg er at vi ikke bruker vise eiendom for å bytte synlighet av innholdet vårt. Den egenskapen teller ikke seg blant de animerte CSS-egenskapene.

Her er de tilsvarende CSS-stilene:

.gjem display: none;  .show display: flex;  .info overflow: hidden; overgang: høyde .5s;

3. JavaScript

Nå er det på tide å diskutere hvordan JavaScript-koden skal fungere.

For det første, så snart DOM er klar, får vi høyden på .info element og sett deretter umiddelbart verdien til 0.

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

Husk at avhengig av innholdet ditt (for eksempel hvis det inneholder bilder), må du kanskje legge inn koden ovenfor inne i laste begivenhet.

Deretter når .veksle-btn knappen er klikket gjør vi følgende:

  • Bytt synligheten til .mindre og .mer elementer.
  • Beregn høyden på .info element. Hvis det er 0 (i utgangspunktet gir vi det denne verdien), det betyr at innholdet er skjult, så vi avslører det ved å sette sin høyde tilsvarer den innledende høyden (lagret i infoHeight variabel). På den annen side, hvis innholdet er synlig, skjuler vi det ved å sette høyden til 0.
  • Valgfritt sikrer vi at .veksle-btn vil bli klikket bare en gang til lysbildeanimasjonen fullføres (den varer 500 ms). 

Her er koden som implementerer all den atferden:

const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const less = document.querySelector (". mindre"); const more = document.querySelector (". mer"); // første høyde la infoHeight = info.offsetHeight; toggleBtn.addEventListener ("klikk", funksjon () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") ; less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; hvis (infoNewHeight == 0) info.style.height = '$ infoHeight px'; else info.style.height = 0; setTimeout (() => this.disabled = false;, 500););

Nettleserformatering

Det neste trinnet er å sikre at komponenten vil fungere riktig når nettleservinduet blir endret. 

Her er den nødvendige JS-koden:

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

4. Nettleserstøtte

Vår demo skal fungere godt i alle nyere nettlesere og enheter. Også, som vanlig, bruker vi Babel til å kompilere ES6-koden ned til ES5. 

Konklusjon

I denne korte opplæringen bygget vi en trekkspillstil / skjul komponent med CSS og JavaScript. Takket være den animable høyde eiendom klarte vi å legge til en lysbilde-inn / uttrekkseffekt til vår komponent. 

Spesielt har vi ikke vurdert tilgjengeligheten, så hvis du ønsker å forbedre funksjonaliteten som sikkert kan være det neste trinnet.

Flere opplæringsprogrammer "Med et trykk på JavaScript"


Webdesign
×