Hozzon létre egy csak HTML-t használó harmonikát a tartalom elrejtéséhez és felfedéséhez JS vagy CSS nélkül

Tudta-e, hogy létezik egy natív HTML5-megoldás, amellyel nagyon egyszerűen létrehozhat egy harmonika olvasás többet/kevesebb gombot a tartalom elrejtéséhez és felfedéséhez NINCS JavaScript vagy CSS. Olvassa el, hogy megtudja, hogyan.

html5 harmonika

A és a A HTML5 címkék hivatalosan a közzétételi widget elem, De a párosítva A HTML5 címkék a tiszta HTML-csak harmonika.

Jelentés nincs JS VAGY CSS szükség van rá. Milyen klassz!

Íme egy példa, amely egy egyszerű elemet mutat be a és a .

Itt van a kód:

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

és így fog kinézni:

KATT ide

Ez egy natív HTML5 harmonika a tartalom elrejtésére és felfedésére. Nagyon klassz, igaz?

Hogyan működik? A  címke egy nyitható vagy zárható elem burkolóanyagaként szolgál. A felhasználónak rá kell kattintania arra a címkére, amely a címkét az elem megnyitásához vagy bezárásához.

Mi a helyzet a stílussal és a viselkedéssel?

Stílusok

CSS-stílussal testreszabhatja a felfedő szövegmező megjelenését. Az alábbiak egy füles felület stílusát mutatják be:

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;
}

Alapértelmezés szerint a kurzor nyílként jelenik meg, de ha azt szeretné, hogy a mutató kéz ehelyett használja ezt:

details {
cursor: pointer;
}

Viselkedés

A viselkedések beállítása nagyon korlátozott, valójában csak egy dolgot tehetsz, és ez az, hogy elkészíted a feltárt szöveget alapértelmezés szerint nyitott.

A harmonika nyitott állapotában való indításához adja hozzá a logikai értéket nyitva attribútum a címke:

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

Ez egy natív HTML5 harmonika a tartalom elrejtésére és felfedésére. Nagyon klassz, igaz?

Milyen attribútumokat használhatok?

Az alábbi attribútumok használhatók a címke:

AttribútumÉrtékÖsszegzésként
nyitvanyitvaAlapértelmezett: nincs nyitva.
id  értékEgyedi azonosítót biztosít.
osztály  osztálynevekOsztályneveket rendel az elemhez.
stílus  CSS-értékekCSS-stílusokat rendel az elemhez.

Tehát mik a korlátok? Mindig van valami fogás, nem?

Nem támogatja az Internet Explorert

Ez a csak HTML5-öt használó harmonika nem működik az Internet Explorer egyetlen verziójában sem. Ha támogatnia kell az IE11-et, egy másik tartalék megoldást kell használnia a JQuery használatával. Minden más böngésző támogatja és a .

Nincsenek testreszabott animációk vagy átmenetek

Módosíthatja és stílusosan módosíthatja a megjelenést (a fent látható módon), de nem tud semmilyen szöveges animációt vagy átmenetet megjeleníteni. Ha ezt szeretné megtenni, szüksége lesz egy másik CSS/JSS harmonika megoldásra.

Képernyőolvasók és kisegítő lehetőségek

Ez natív HTML5 és *kell elérhető*, de kiderült, hogy a tényleges felfedett szöveget a képernyőolvasó nem mindig jelenti be megfelelően.

Referenciák:

Mathias Ahlgren a cég vezérigazgatója és alapítója Website Rating, szerkesztőkből és írókból álló globális csapat irányításával. Információtudományból és menedzsmentből szerzett mesterfokozatot. Karrierje a keresőoptimalizálás felé fordult az egyetem korai webfejlesztési tapasztalatai után. Több mint 15 éve a SEO, a digitális marketing és a webfejlesztők területén. Fókuszában a webhelyek biztonsága is szerepel, amit a Cyber ​​Security tanúsítványa igazol. Ez a sokrétű szakértelem támasztja alá vezetői szerepét Website Rating.

Kezdőlap » Források és eszközök » Hozzon létre egy csak HTML-t használó harmonikát a tartalom elrejtéséhez és felfedéséhez JS vagy CSS nélkül

Legyen tájékozott! Csatlakozzon hírlevelünkhöz
Iratkozzon fel most, és ingyenes hozzáférést kap a csak előfizetőknek szóló útmutatókhoz, eszközökhöz és forrásokhoz.
Bármikor leiratkozhat. Adatai biztonságban vannak.
Legyen tájékozott! Csatlakozzon hírlevelünkhöz
Iratkozzon fel most, és ingyenes hozzáférést kap a csak előfizetőknek szóló útmutatókhoz, eszközökhöz és forrásokhoz.
Bármikor leiratkozhat. Adatai biztonságban vannak.
Legyen tájékozott! Csatlakozzon hírlevelünkhöz!
Iratkozzon fel most, és ingyenes hozzáférést kap a csak előfizetőknek szóló útmutatókhoz, eszközökhöz és forrásokhoz.
Maradj naprakész! Csatlakozzon hírlevelünkhöz
Bármikor leiratkozhat. Adatai biztonságban vannak.
A cégem
Maradj naprakész! Csatlakozzon hírlevelünkhöz
???? (majdnem) feliratkozott!
Lépjen be az e-mail postafiókjába, és nyissa meg az e-mailt, amelyet e-mail címének megerősítéséhez küldtem.
A cégem
Feliratkozott!
Köszönjük előfizetését. Hétfőnként hírlevelet küldünk betekintést nyújtó adatokkal.
Megosztani...