Ba al zenekien jatorrizko HTML5 irtenbide bat dagoela akordeoi bat gehiago/gutxiago irakurtzeko botoia erraz sortzeko, edukia ezkutatzeko eta erakusteko? JavaScript edo CSS EZ. Irakurri nola jakiteko.
The HTML5 etiketak ofizialki a dibulgazio widget elementua, Baina parekatuta HTML5 etiketak emango dizute HTML hutsezko akordeoia.
esanahia ez JS EDO CSS behar da. Zein polita den hori!
Hona hemen a-rekin elementu sinple bat erakusten duen adibide bat .
Hona hemen kodea:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>eta hona hemen nola izango den:
Irakurri gehiago
Hau jatorrizko HTML5 akordeoia da edukia ezkutatzeko eta erakusteko. Nahiko polita, ezta?
Nola funtzionatzen du? The etiketa ireki edo itxi daitekeen elementu baten bilgarri gisa balio du. Erabiltzaileak etiketan klik egin behar du etiketa elementua ireki edo ixteko.
Zer gertatzen da estiloarekin eta portaerarekin?
Styles
CSS estiloa aplika dezakezu agerian testu-koadroaren itxura pertsonalizatzeko. Jarraian, fitxadun interfazearen estiloa ematen du:
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;
}Lehenespenez, kurtsorea gezi baten moduan agertzen da, baina nahi baduzu a eskua seinalatuz horren ordez, erabili hau:
details {
cursor: pointer;
}jokabide
Jokabideak ezartzea oso mugatua da, benetan gauza bakarra egin dezakezu eta hori da agerian dagoen testua egitea irekita lehenespenez.
Akordeoia bere egoera irekian hasteko, gehitu boolearra ireki egotzi etiketa:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Irakurri gehiago
Hau jatorrizko HTML5 akordeoia da edukia ezkutatzeko eta erakusteko. Nahiko polita, ezta?
Zein atributu erabil ditzaket?
Beheko atributuak erabil daitezke etiketa:
| Attribute | Balio | Laburpena |
|---|---|---|
| ireki | ireki | Lehenetsia da ez irekita. |
| id | balioa | Identifikatzaile bakarra eskaintzen du. |
| klase | klase-izenak | Elementuari klase izenak esleitzen dizkio. |
| estilo | CSS-balioak | Elementuari CSS estiloak esleitzen dizkio. |
Beraz, zeintzuk dira mugak? Beti dago harrapaketa bat, ezta?
Ez dago Internet Explorer-erako laguntzarik
HTML5 soilik duen akordeoi honek ez du funtzionatuko Internet Explorer-en edozein bertsiotan. IE11 onartzen baduzu, JQuery erabiliz beste irtenbide bat erabili beharko duzu. Beste nabigatzaile guztiek onartzen dute .
Ez dago pertsonalizatutako animaziorik edo trantsiziorik
Itxura alda dezakezun arren (goian erakusten den bezala), ezin izango duzu testu-animaziorik edo trantsiziorik egin. Hori egin nahi baduzu, beste CSS/JSS akordeoi irtenbide bat beharko duzu.
Pantaila-irakurgailuak eta irisgarritasuna
Hau bertakoa da HTML5 eta *atzigarria izan beharko luke* baina aurkitu da agerian dagoen benetako testua ez dela beti behar bezala iragartzen pantaila-irakurle batek.
References:
