Vytvořte akordeon pouze HTML pro skrytí a odhalení obsahu (bez JS nebo CSS)

in Zdroje a nástroje

Věděli jste, že existuje nativní řešení HTML5 pro velmi snadné vytvoření tlačítka číst více/méně akordeonu, pomocí kterého můžete skrýt a odhalit obsah ŽÁDNÝ JavaScript nebo CSS. Přečtěte si, jak na to.

html5 akordeon

Projekt a HTML5 tagy jsou oficiálně a prvek widgetu zveřejnění, Ale spárováno s Značky HTML5 vám poskytnou čistý akordeon pouze HTML.

Význam žádný JS NEBO CSS je potřeba. Jak skvělé to je!

Zde je příklad ukazující jednoduchý prvek s a a .

Tady 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 takhle to bude vypadat:

Více

Toto je nativní HTML5 akordeon ke skrytí a odhalení obsahu. Docela cool, že?

Jak to funguje? Projekt  tag slouží jako obal pro prvek, který lze otevřít nebo zavřít. Uživatel musí kliknout na štítek, který je tag pro otevření nebo zavření prvku.

A co styling a chování?

Styly

Vzhled textového pole odhalení můžete upravit pomocí stylů CSS. Níže uvádíme styl rozhraní 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;
}

Ve výchozím nastavení se kurzor zobrazuje jako šipka, ale pokud chcete, aby byl a ukazující ruku místo toho použijte toto:

details {
cursor: pointer;
}

chování

Nastavení chování je velmi omezené, existuje opravdu jen jedna věc, kterou můžete udělat, a to vytvořit odhalený text ve výchozím nastavení otevřít.

Chcete-li spustit akordeon v otevřeném stavu, přidejte booleovskou hodnotu otevřít atribut pro tag:

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

Toto je nativní HTML5 akordeon ke skrytí a odhalení obsahu. Docela cool, že?

Jaké atributy mohu použít?

Níže uvedené atributy lze použít pro tag:

AtributHodnotaShrnutí
otevřítotevřítVýchozí hodnota je Není otevřeno.
id  hodnotaPoskytuje jedinečný identifikátor.
třída  třídní jménaPřiřadí elementu názvy tříd.
styl  CSS-hodnotyPřiřadí elementu styly CSS.

Jaká jsou tedy omezení? Vždycky to má nějaký háček, ne?

Žádná podpora pro Internet Explorer

Tento akordeon pouze ve formátu HTML5 nebude fungovat v žádné verzi prohlížeče Internet Explorer. Pokud musíte mít podporu IE11, budete muset použít jiné záložní řešení pomocí JQuery. Všechny ostatní prohlížeče podporují a .

Žádné přizpůsobené animace nebo přechody

I když můžete upravit a upravit vzhled (jak je uvedeno výše), nebudete moci provádět žádné animace odhalování textu nebo přechody. Pokud to chcete udělat, budete potřebovat další řešení pro akordeon CSS/JSS.

Čtečky obrazovky a dostupnost

Toto je nativní HTML5 a *měl by být* přístupný, ale bylo zjištěno, že skutečný odhalený text není čtečkou obrazovky vždy správně oznámen.

Reference:

o autorovi

Matt Ahlgren

Mathias Ahlgren je generálním ředitelem a zakladatelem společnosti Website Rating, řídí globální tým redaktorů a spisovatelů. Je držitelem magisterského titulu v oboru informační vědy a managementu. Jeho kariéra se zaměřila na SEO po prvních zkušenostech s vývojem webu během univerzity. Více než 15 let v oblasti SEO, digitálního marketingu a vývoje webu. Mezi jeho zaměření patří také bezpečnost webových stránek, doložená certifikátem v kybernetické bezpečnosti. Tato různorodá odbornost je základem jeho vedení Website Rating.

Domů » Zdroje a nástroje » Vytvořte akordeon pouze HTML pro skrytí a odhalení obsahu (bez JS nebo CSS)

Zůstaňte informováni! Připojte se k našemu newsletteru
Přihlaste se k odběru a získejte bezplatný přístup k příručkám, nástrojům a zdrojům pouze pro předplatitele.
Z odběru se můžete kdykoli odhlásit. Vaše data jsou v bezpečí.
Zůstaňte informováni! Připojte se k našemu newsletteru
Přihlaste se k odběru a získejte bezplatný přístup k příručkám, nástrojům a zdrojům pouze pro předplatitele.
Z odběru se můžete kdykoli odhlásit. Vaše data jsou v bezpečí.
Sdílet s...