CSS eksklusiivne akordion: ühekordse avamise juhend

Akordionid on levinud kasutajaliidese muster, mida kasutatakse sisu järkjärguliseks avaldamiseks. Need võimaldavad teil esitada teavet kompaktsel ja organiseeritud viisil, parandades kasutajakogemust, eriti mobiilseadmetes. Selles juhendis uurime, kuidas luua ainult CSS-il põhinevat eksklusiivset akordioni, mida tuntakse ka kui ühekordse avamisega akordioni. Seda tüüpi akordion tagab, et igal ajahetkel on avatud ainult üks jaotis, pakkudes teie kasutajatele puhast ja fokusseeritud sirvimiskogemust.

Miks kasutada eksklusiivset akordioni?

Kuigi tavalised akordionid võimaldavad mitmel jaotisel olla samaaegselt avatud, pakuvad eksklusiivsed akordionid mitmeid eeliseid:

• Parem fookus: Piirates kasutaja ühe avatud jaotisega, suunate nende tähelepanu ja vähendate kognitiivset ülekoormust.
• Täiustatud navigeerimine: Eksklusiivsed akordionid lihtsustavad navigeerimist, eriti keerukate sisustruktuuride puhul. Kasutajad teavad alati, kus nad on ja mida kuvatakse.
• Mobiilisõbralik: Väiksematel ekraanidel aitab eksklusiivne akordion säästa väärtuslikku ekraanipinda ja pakub paremat kasutajakogemust.
• Selgem hierarhia: Ühekordse avamise mehhanism tugevdab teie sisu hierarhilist struktuuri, muutes selle mõistmise lihtsamaks.

Ainult CSS-il põhinev lähenemine

Kuigi akordionite loomiseks saab kasutada JavaScripti, pakub ainult CSS-il põhinev lähenemine mitmeid eeliseid:

• JavaScripti sõltuvuse puudumine: Kõrvaldab vajaduse JavaScripti järele, vähendades lehe laadimisaega ja potentsiaalseid ühilduvusprobleeme.
• Ligipääsetavus: Õigesti rakendatuna võivad ainult CSS-il põhinevad akordionid olla puuetega kasutajatele paremini ligipääsetavad.
• Lihtsus: Ainult CSS-il põhinev lähenemine võib olla lihtsam rakendada ja hooldada akordioni põhiliste funktsioonide jaoks.

Eksklusiivse akordioni ehitamine: samm-sammult

Vaatame samm-sammult läbi ainult CSS-il põhineva eksklusiivse akordioni loomise protsessi. Käsitleme HTML-struktuuri, CSS-stiile ja ühekordse avamise mehhanismi loogikat.

1. HTML-struktuur

Meie akordioni aluseks on HTML-struktuur. Kasutame kombinatsiooni <input type="radio"> elementidest, <label> elementidest ja <div> elementidest, et luua akordioni jaotised.

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <label for="section1">Jaotis 1</label>
  <div class="content">
    <p>Jaotise 1 sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Jaotis 2</label>
  <div class="content">
    <p>Jaotise 2 sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Jaotis 3</label>
  <div class="content">
    <p>Jaotise 3 sisu.</p>
  </div>
</div>

Selgitus:

• <div class="accordion">: See on kogu akordioni peamine konteiner.
• <input type="radio" name="accordion" id="section1" checked>: Iga jaotis algab raadionupuga. Atribuut name="accordion" on ülioluline; see grupeerib kõik raadionupud kokku, tagades, et korraga saab valida ainult ühe. Atribuuti id kasutatakse raadionupu sidumiseks vastava sildiga. Atribuut checked esimesel raadionupul muudab selle vaikimisi avatud jaotiseks.
• <label for="section1">Jaotis 1</label>: Silt toimib iga jaotise klõpsatava päisena. Atribuut for peab vastama vastava raadionupu id-le.
• <div class="content">: See sisaldab iga jaotise tegelikku sisu. Esialgu on see sisu peidetud.

2. CSS-stiilid

Nüüd stiilime akordioni CSS-i abil. Keskendume raadionuppude peitmisele, siltide stiilimisele ja sisu nähtavuse kontrollimisele vastavalt raadionupu olekule.

.accordion {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion input[type="radio"] {
  display: none;
}

.accordion label {
  display: block;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
}

.accordion input[type="radio"]:checked + label {
  background-color: #ddd;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
}

Selgitus:

• .accordion input[type="radio"] { display: none; }: See peidab raadionupud vaateväljast. Need on endiselt funktsionaalsed, kuid kasutajale nähtamatud.
• .accordion label { ... }: See stiilib sildid, muutes need klõpsatavate päiste sarnaseks. Seame cursor väärtuseks pointer, et näidata, et need on interaktiivsed.
• .accordion .content { ... display: none; }: Esialgu peidame iga jaotise sisu, kasutades display: none;.
• .accordion input[type="radio"]:checked + label { ... }: See stiilib hetkel valitud (märgitud) raadionupu silti. Muudame taustavärvi, et näidata, et see on aktiivne. + (kõrvuti asetseva õe valija) sihib silti, mis järgneb vahetult märgitud raadionupule.
• .accordion input[type="radio"]:checked + label + .content { ... display: block; }: See kuvab hetkel valitud jaotise sisu. Jällegi kasutame kaks korda kõrvuti asetseva õe valijat (+), et sihtida .content div-i, mis järgneb sildile, mis omakorda järgneb märgitud raadionupule. See on ainult CSS-il põhineva akordioni loogika võti.

3. Ligipääsetavuse kaalutlused

Ligipääsetavus on iga veebikomponendi jaoks ülioluline. Siin on mõned kaalutlused, kuidas muuta oma ainult CSS-il põhinev akordion ligipääsetavaks:

• Klaviatuuriga navigeerimine: Veenduge, et kasutajad saaksid akordionis navigeerida klaviatuuri abil. Raadionupud on oma olemuselt klaviatuuriga fokuseeritavad, kuid võiksite lisada visuaalseid vihjeid (nt fookuse piirjoon), kui silt on fokuseeritud.
• ARIA atribuudid: Kasutage ARIA atribuute, et pakkuda ekraanilugejatele täiendavat semantilist teavet. Näiteks saate kasutada aria-expanded, et näidata, kas jaotis on avatud või suletud, ja aria-controls, et siduda silt vastava sisujaotisega.
• Semantiline HTML: Kasutage sobivates kohtades semantilisi HTML-elemente. Näiteks kaaluge jaotiste pealkirjade jaoks <h2> või <h3> elementide kasutamist, selle asemel et lihtsalt silte stiilida.
• Kontrastsus: Tagage piisav värvikontrastsus teksti ja tausta vahel loetavuse tagamiseks.

Siin on näide, kuidas lisada ARIA atribuute meie HTML-struktuurile:

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked aria-controls="content1">
  <label for="section1" aria-expanded="true">Jaotis 1</label>
  <div class="content" id="content1" aria-hidden="false">
    <p>Jaotise 1 sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false">Jaotis 2</label>
  <div class="content" id="content2" aria-hidden="true">
    <p>Jaotise 2 sisu.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false">Jaotis 3</label>
  <div class="content" id="content3" aria-hidden="true">
    <p>Jaotise 3 sisu.</p>
  </div>
</div>

Ja vastav CSS aria-expanded ja aria-hidden uuendamiseks:

.accordion [aria-expanded="true"] {
 background-color: #ddd;
}

.accordion [aria-hidden="false"] {
 display: block;
}

.accordion [aria-hidden="true"] {
 display: none;
}

4. Täpsem kohandamine

Akordioni põhistruktuuri saab mitmel viisil kohandada vastavalt teie konkreetsetele disaininõuetele:

• Animatsioonid: Lisage CSS-i üleminekuid või animatsioone, et sisujaotisi sujuvalt avada ja sulgeda. Näiteks saate kasutada atribuuti transition, et animeerida sisu height või opacity.
• Ikoonid: Lisage siltidele ikoone, et visuaalselt näidata iga jaotise avatud/suletud olekut. Ikoonide lisamiseks saate kasutada CSS-i pseudoelemente (::before või ::after).
• Kujundus: Kohandage värve, fonte ja vahesid, et need sobiksid teie veebisaidi üldise kujundusega.

Siin on näide lihtsa ülemineku lisamisest sisu kõrgusele:

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
  height: auto; /* Oluline: Võimaldab sisul laieneda oma loomulikule kõrgusele */
}

5. Ülemaailmsed näited ja kohandused

Ainult CSS-il põhinev eksklusiivne akordion on mitmekülgne muster, mida saab kohandada erinevates kontekstides erinevates kultuurides ja piirkondades. Siin on mõned näited:

• E-kaubanduse tootelehed: Esitage toote üksikasjad, nagu spetsifikatsioonid, arvustused ja tarneteave, organiseeritud viisil. See on ülemaailmselt rakendatav, kuna tooteinfo on veebipoes ostlemisel asukohast olenemata ülioluline.
• KKK jaotised: Kuvage korduma kippuvaid küsimusi ja vastuseid. See on levinud kasutusjuhtum veebisaitidel üle maailma, aidates kasutajatel kiiresti teavet leida ja vähendades tugiteenuste päringuid.
• Dokumentatsioon ja õpetused: Korraldage keerukas dokumentatsioon või õpetuste sisu hallatavateks jaotisteks. See on kasulik tarkvaraettevõtetele, haridusasutustele ja igale organisatsioonile, mis pakub veebipõhiseid õppematerjale ülemaailmselt.
• Mobiilne navigeerimine: Kasutage eksklusiivset akordioni, et luua mobiilisõbralik navigeerimismenüü, eriti suure hulga menüüelementidega veebisaitide jaoks. See on ülioluline kasutajatele, kes külastavad veebisaite nutitelefonides ja tahvelarvutites, tagades sujuva kogemuse.
• Vormid: Jagage pikad vormid akordionistruktuuri abil väiksemateks ja paremini hallatavateks sammudeks. See võib parandada kasutajate täitmismäärasid ja vähendada vormide hülgamist. Maksimaalse kasutajakogemuse tagamiseks kaaluge siltide tõlkimist kohalikesse keeltesse.

6. Levinud lõksud ja lahendused

Kuigi ainult CSS-il põhinev lähenemine on tõhus, on mõningaid potentsiaalseid lõkse, millest tuleks teadlik olla:

• CSS-i spetsiifilisus: Veenduge, et teie CSS-reeglitel oleks piisav spetsiifilisus, et alistada kõik vastuolulised stiilid. Kasutage spetsiifilisemaid valijaid või märksõna !important ettevaatlikult.
• Ligipääsetavuse probleemid: Ligipääsetavuse kaalutluste eiramine võib tekitada takistusi puuetega kasutajatele. Alati testige oma akordionit ekraanilugejate ja klaviatuuriga navigeerimisega.
• Keerukas sisu: Akordioni jaotiste väga keeruka sisu puhul võib JavaScriptil põhinev lahendus pakkuda rohkem paindlikkust ja kontrolli.
• Brauseri ühilduvus: Testige oma akordionit erinevates brauserites, et tagada ühtlane käitumine. Kuigi enamik kaasaegseid brausereid toetab selles lähenemises kasutatavaid CSS-valijaid, võivad vanemad brauserid vajada polüfille või alternatiivseid lahendusi.

7. Alternatiivid ainult CSS-il põhinevatele akordionitele

Kuigi see artikkel keskendus ainult CSS-il põhinevatele akordionitele, on saadaval ka teisi võimalusi:

• JavaScripti akordionid: Pakuvad rohkem paindlikkust ja kontrolli akordioni käitumise üle. JavaScripti saab kasutada animatsioonide lisamiseks, keeruka sisu haldamiseks ja ligipääsetavuse parandamiseks. Teegid nagu jQuery UI ja raamistikud nagu React ja Vue.js pakuvad valmis akordionikomponente.
• HTML <details> ja <summary> elemendid: Need natiivsed HTML-elemendid pakuvad akordioni põhifunktsionaalsust ilma igasuguse JavaScriptita. Siiski puudub neil eksklusiivse avamise käitumine ja need nõuavad kohandamiseks CSS-stiile.

Kokkuvõte

Ainult CSS-il põhineva eksklusiivse akordioni loomine on suurepärane viis kasutajakogemuse parandamiseks, eriti mobiilseadmetes. Kasutades CSS-valijate ja raadionuppude võimsust, saate luua lihtsa, ligipääsetava ja tõhusa akordioni, ilma et peaksite tuginema JavaScriptile. Ärge unustage arvestada ligipääsetavusega, testida erinevates brauserites ja kohandada koodi vastavalt oma konkreetsetele disaininõuetele. Järgides selles juhendis toodud samme, saate luua professionaalse ja kasutajasõbraliku akordioni, mis parandab veebisaidi navigeerimist ja aitab kasutajatel kiiresti ja lihtsalt leida vajalikku teavet. Selle lähenemise pakutav ühekordse avamise mehhanism viib puhtama ja fokusseerituma kasutajakogemuseni.

See tehnika on rakendatav erinevates rahvusvahelistes kontekstides, pakkudes ühtlast kasutajakogemust olenemata kasutaja asukohast või keelest. Kohandades sisu ja disaini kohalike eelistustega, saate luua akordioni, mis kõnetab kasutajaid kogu maailmas.

Lisamaterjalid

• MDN Web Docs: <input type="radio">
• MDN Web Docs: Kõrvuti asetseva õe kombinaator (+)
• WAI-ARIA autorite tavad: Akordion