Accentsconagua

Hur man bygger en Accordion Component med CSS och en Touch of JavaScript

Webbdesign
Share

I dagens handledning lär vi oss att bygga en show / hide komponent med CSS och lite JavaScript. Som standard tillhandahåller jQuery slideToggle metod som gör det möjligt för oss att skapa dragspel med en glidrörelse. Vår utmaning är att efterlikna denna funktionalitet med ren JavaScript.

Här är komponenten vi ska skapa:

Notera: Detta är funktionalitet som tillhandahålls av

och element, även om dessa ännu inte tycker om stöd i Microsoft-webbläsare. 

  • Förklara "Detaljer" och "Sammanfattning" Element

    Massor av JavaScript-bibliotek är utvecklade för att ge oss ytterligare interaktiva widgets på webbplatser. På samma sätt har HTML5 också tolkat ett antal populära ...
    Thoriq Firdaus
    HTML5

1. HTML

Till att börja med definierar vi ett element med klassen av behållare som innehåller två delelement:

  • knappen som kommer att gömma och avslöja innehållet (inklusive en inline SVG-ikon)
  • det faktiska innehållet

Så här ser det ut:

2. CSS

CSS är ganska enkelt. Vi behöver definiera två hjälparklasser (dvs.. Dölj och show). 

För att dölja och avslöja målelementet använder vi höjd egendom, men vi kommer inte att ange dess värden i CSS. Istället ställer vi dynamiskt höjdsvärdena genom JavaScript. 

En sak att notera är att vi inte använder visa egendom för att växla synligheten av vårt innehåll. Den egenskapen räknas inte bland de animerbara CSS-egenskaperna.

Här är motsvarande CSS-stilar:

.gömma display: none;  .show display: flex;  .info översvämning: dold; övergång: höjd .5s;

3. JavaScript

Nu är det dags att diskutera hur vår JavaScript-kod ska fungera.

Först, så snart DOM är klart, får vi höjden på .info element och ställ omedelbart sitt värde till 0.

const info = document.querySelector (". info"); låt infoHeight = info.offsetHeight; info.style.height = 0;

Tänk på att beroende på innehållet (t.ex. om det innehåller bilder) kan du behöva bifoga koden ovanför ladda händelse.

Därefter när .växla-BTN knappen klickar vi gör följande:

  • Växla siktigheten hos .mindre och .Mer element.
  • Räkna om höjden på .info element. Om det är 0 (ursprungligen ger vi det här värdet), det vill säga innehållet är dolt, så vi avslöjar det genom att ställa in dess höjd lika med sin ursprungliga höjd (lagrad i infoHeight variabel). Å andra sidan om innehållet är synligt, döljer vi det genom att ställa in dess höjd till 0.
  • Eventuellt ser vi till att .växla-BTN kommer bara att klickas en gång tills bildspelet avslutas (det varar 500 ms). 

Här är koden som implementerar allt detta beteende:

const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const less = document.querySelector (". mindre"); const more = document.querySelector (". more"); // initial höjd låt infoHeight = info.offsetHeight; toggleBtn.addEventListener ("klicka", funktion () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") ; less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; om (infoNewHeight == 0) info.style.height = '$ infoHeight px'; else info.style.height = 0; setTimeout (() => this.disabled = false;, 500););

Ändra webbläsare

Nästa steg är att se till att komponenten fungerar korrekt när webbläsarfönstret ändras. 

Här är den nödvändiga JS-koden:

// variabla definitioner här window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide")) .style.height = '$ infoHeight px'; annat info.style.height = 0;);

4. Browser Support

Vår demo ska fungera bra i alla nya webbläsare och enheter. Också, som vanligt, använder vi Babel för att kompilera ES6-koden ner till ES5. 

Slutsats

I denna korta handledning byggde vi en dragspelskonstruktion / dölj komponent med CSS och JavaScript. Tack vare animatabel höjd egendom lyckades vi lägga till en inskjutningsläge / utseffekt för vår komponent. 

I synnerhet har vi inte ansett tillgänglighet, så om du vill förbättra sin funktionalitet som säkert kan vara nästa steg.

Fler handledning "Med en touch av JavaScript"


Webbdesign
×