Looge HTML-akordion -> Peida ja paljasta sisu ilma JS/CSS-ita

Kas teadsite, et on olemas natiivne HTML5-lahendus, mille abil saab väga lihtsalt luua akordioni loe rohkem/vähem nuppu, millega sisu peita ja paljastada JavaScripti ega CSS-i EI OLE. Lugege edasi, et teada saada, kuidas.

. ja HTML5 sildid on ametlikult a avalikustamise vidina element, Kuid paaritatud HTML5 sildid annavad teile a puhas HTML-akordion.

Tähendus pole JS-i ega CSS-i on vaja. Kui lahe see on!

Siin on näide, mis näitab lihtsat elementi koos a ja .

Siin on kood:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

ja nii see välja näeb:

Loe rohkem

See on omapärane HTML5 akordion sisu peitmiseks ja paljastamiseks. Päris lahe, eks?

Kuidas see toimib? . silt toimib avatava või sulgetava elemendi ümbrisena. Kasutaja peab klõpsama sildil, mis on elemendi avamiseks või sulgemiseks.

Kuidas on lood stiili ja käitumisega?

Stiilid

Saate rakendada CSS-stiili, et kohandada paljastamise tekstikasti välimust. Allpool on toodud vahekaartidega liidese stiil:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Vaikimisi kuvatakse kursor noolena, kuid kui soovite, et see oleks a osutav käsi selle asemel kasutage seda:

details {
cursor: pointer;
}

Käitumine

Käitumise seadistamine on väga piiratud, tegelikult saate teha ainult ühte asja ja see on ilmutatud teksti koostamine vaikimisi avatud.

Akordioni käivitamiseks avatud olekus lisage Boolean avatud atribuut silt:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

Loe rohkem

See on omapärane HTML5 akordion sisu peitmiseks ja paljastamiseks. Päris lahe, eks?

Milliseid atribuute saan kasutada?

Alltoodud atribuute saab kasutada silt:

Atribuut	Väärtus	kokkuvõte
avatud	avatud	Vaikimisi on suletud.
id	väärtus	Annab kordumatu identifikaatori.
klass	klassinimed	Määrab elemendile klassinimed.
stiil	CSS-väärtused	Määrab elemendile CSS-stiile.

Millised on siis piirangud? Alati on konks, kas pole?

Internet Exploreri tugi puudub

See ainult HTML5-ga akordion ei tööta üheski Internet Exploreri versioonis. Kui teil peab olema see IE11 tugi, peate JQuery abil kasutama teistsugust varulahendust. Kõik teised brauserid toetavad ja .

Pole kohandatud animatsioone ega üleminekuid

Kuigi saate välimust muuta ja stiilida (nagu ülal näidatud), ei saa te tekstiga animatsioone ega üleminekuid näidata. Kui soovite seda teha, vajate teist CSS/JSS akordionilahendust.