Vedeli ste, že existuje natívne riešenie HTML5 na veľmi jednoduché vytvorenie tlačidla čítať viac/menej akordeónu na skrytie a odhalenie obsahu pomocou ŽIADNY JavaScript alebo CSS. Čítajte ďalej a zistite ako.
a HTML5 tagy sú oficiálne a prvok widgetu zverejnenia, Ale spárovaný s HTML5 tagy vám poskytnú a čistý akordeón iba vo formáte HTML.
Význam žiadny JS ALEBO CSS je potrebné. Aké je to skvelé!
Tu je príklad zobrazujúci jednoduchý prvok s a a .
Tu je kód:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>a takto to bude vyzerať:
Čítaj viac
Toto je natívny akordeón HTML5 na skrytie a odhalenie obsahu. Celkom fajn, však?
Ako to funguje? tag slúži ako obal pre prvok, ktorý je možné otvoriť alebo zatvoriť. Používateľ musí kliknúť na štítok, ktorý je tag na otvorenie alebo zatvorenie prvku.
A čo styling a správanie?
Štýly
Na prispôsobenie vzhľadu textového poľa odhalenia môžete použiť štýl CSS. Nižšie uvádzame štýl rozhrania s kartami:
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;
}V predvolenom nastavení sa kurzor zobrazuje ako šípka, ale ak chcete, aby bol a ukazujúcou rukou namiesto toho použite toto:
details {
cursor: pointer;
}správanie
Nastavenie správania je veľmi obmedzené, v skutočnosti môžete urobiť len jednu vec, a to vytvoriť odhalený text predvolene otvorené.
Ak chcete spustiť akordeón v otvorenom stave, pridajte Boolean otvoriť priradiť k značka:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Čítaj viac
Toto je natívny akordeón HTML5 na skrytie a odhalenie obsahu. Celkom fajn, však?
Aké atribúty môžem použiť?
Nižšie uvedené atribúty môžu byť použité pre značka:
| atribút | Hodnota | zhrnutie |
|---|---|---|
| otvoriť | otvoriť | Predvolená hodnota je nie je otvorené. |
| id | hodnotu | Poskytuje jedinečný identifikátor. |
| trieda | triedne mená | Elementom priradí názvy tried. |
| štýl | CSS-hodnoty | Elementu priradí štýly CSS. |
Aké sú teda obmedzenia? Vždy sa nájde nejaký háčik, nie?
Žiadna podpora pre Internet Explorer
Tento akordeón iba vo formáte HTML5 nebude fungovať v žiadnej verzii prehliadača Internet Explorer. Ak musíte mať podporu IE11, budete musieť použiť iné núdzové riešenie pomocou JQuery. Všetky ostatné prehliadače podporujú a .
Žiadne prispôsobené animácie alebo prechody
Aj keď môžete upraviť a upraviť vzhľad (ako je uvedené vyššie), nebudete môcť robiť žiadne animácie alebo prechody odhaľovania textu. Ak to chcete urobiť, budete potrebovať ďalšie riešenie pre akordeón CSS/JSS.
Čítačky obrazovky a dostupnosť
Toto je natívne HTML5 a *mal by byť* prístupný, ale zistilo sa, že skutočný odhalený text nie je čítačkou obrazovky vždy správne oznámený.
Referencie:
