M

MLOG

Čeština

Ovládněte tvorbu akordeonů pouze v CSS s funkcí jediné otevřené sekce. Zlepšíte tak uživatelskou zkušenost a přístupnost na různých webových platformách.

Akordeony pouze v CSS: Tvorba widgetů s jedinou otevřenou sekcí pro vylepšené UX

Akordeony jsou základním prvkem moderního webového designu, který poskytuje čistý a efektivní způsob, jak prezentovat velké množství informací ve stravitelné formě. Jsou obzvláště užitečné pro často kladené dotazy (FAQ), popisy produktů a navigační menu. Tento článek se zabývá tvorbou akordeonů výhradně pomocí CSS s chováním jediné otevřené sekce, což znamená, že v jeden okamžik může být otevřena pouze jedna sekce akordeonu. Tento přístup zlepšuje uživatelskou zkušenost tím, že zabraňuje přetížení obsahem a podporuje soustředěné procházení.

Výhody akordeonů pouze v CSS

Tradiční akordeony založené na JavaScriptu často vyžadují správu stavu a zpracování událostí, což může vašemu kódu přidat na složitosti. Akordeony vytvořené výhradně v CSS naopak využívají sílu CSS selektorů a pseudotřídy `:checked` k dosažení požadované funkčnosti bez závislosti na JavaScriptu. To má za následek:

Základní stavební kameny: Struktura HTML

Základem našeho akordeonu pouze v CSS je dobře strukturovaný HTML kód. Použijeme následující prvky:

Zde je základní struktura HTML:


<div class="accordion-container">
  <input type="radio" name="accordion" id="section1">
  <label for="section1">Název sekce 1</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">Název sekce 2</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">Název sekce 3</label>
  <div class="accordion-content">
    <p>Obsah pro sekci 3.</p>
  </div>
</div>

Vysvětlení:

Stylování akordeonu pomocí CSS

Nyní přidáme CSS pro nastylování akordeonu a implementaci chování jediné otevřené sekce.


.accordion-container {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="radio"] {
  display: none;
}

label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none; /* Počáteční skrytí obsahu */
}

input[type="radio"]:checked + label {
  background-color: #ddd;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block; /* Zobrazení obsahu po zaškrtnutí radio buttonu */
}

Vysvětlení:

Vylepšení přístupnosti pomocí ARIA atributů

Abychom zajistili, že náš akordeon bude přístupný uživatelům s postižením, musíme přidat ARIA atributy. ARIA (Accessible Rich Internet Applications) atributy poskytují sémantické informace asistenčním technologiím, jako jsou čtečky obrazovky.

Takto můžeme vylepšit přístupnost:


<div class="accordion-container" role="presentation"> 
  <input type="radio" name="accordion" id="section1" aria-controls="content1">
  <label for="section1" aria-expanded="false" aria-controls="content1">Název sekce 1</label>
  <div id="content1" class="accordion-content" role="region" aria-labelledby="section1">
    <p>Obsah pro sekci 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false" aria-controls="content2">Název sekce 2</label>
  <div id="content2" class="accordion-content" role="region" aria-labelledby="section2">
    <p>Obsah pro sekci 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false" aria-controls="content3">Název sekce 3</label>
  <div id="content3" class="accordion-content" role="region" aria-labelledby="section3">
    <p>Obsah pro sekci 3.</p>
  </div>
</div>

Vysvětlení:

Důležité aspekty přístupnosti:

Přizpůsobení a vylepšení

Základní akordeon pouze v CSS lze dále přizpůsobit a vylepšit tak, aby splňoval specifické požadavky na design.

Přidání přechodů (transitions)

Pro vytvoření plynulejší uživatelské zkušenosti můžeme přidat CSS přechody k obsahu akordeonu.


.accordion-content {
  padding: 10px;
  background-color: #fff;
  display: none;
  transition: max-height 0.3s ease-out; /* Přidání přechodu */
  max-height: 0;
  overflow: hidden;
}

input[type="radio"]:checked + label + .accordion-content {
  display: block;
  max-height: 500px; /* Nastavení maximální výšky pro přechod */
}

Vysvětlení:

Stylování pomocí ikon

Přidání ikon do záhlaví akordeonu může zlepšit vizuální přitažlivost a srozumitelnost pro uživatele. Pro tento účel můžete použít CSS pseudoelementy nebo ikonové fonty.

Použití CSS pseudoelementů:


label::after {
  content: '+'; /* Počáteční ikona */
  float: right;
  font-size: 1.2em;
}

input[type="radio"]:checked + label::after {
  content: '-'; /* Změna ikony při rozbalení */
}

Použití ikonových fontů (např. Font Awesome):

  1. Zahrňte Font Awesome CSS do vašeho HTML: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="..." crossorigin="anonymous" />
  2. Použijte příslušné třídy Font Awesome ve svých labelech:

<label for="section1">Název sekce 1 <i class="fas fa-plus"></i></label>

Poté použijte CSS ke změně ikony, když je sekce rozbalená:


input[type="radio"]:checked + label i.fas.fa-plus {
  display: none;
}

input[type="radio"]:checked + label {
    /* vložit ikonu mínus */
}

input[type="radio"]:checked + label::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f068"; /* unicode pro fa-minus */
    float:right;
}

Aspekty responzivního designu

Ujistěte se, že váš akordeon funguje dobře na různých velikostech obrazovky pomocí technik responzivního designu. Můžete použít media queries k úpravě stylů akordeonu na základě šířky obrazovky.

Příklad:


@media (max-width: 768px) {
  .accordion-container {
    width: 100%; /* Úprava šířky pro menší obrazovky */
  }

  label {
    padding: 8px;
    font-size: 0.9em; /* Úprava velikosti písma */
  }
}

Pokročilé techniky

Zatímco základní akordeon pouze v CSS poskytuje pevný základ, existují pokročilé techniky, které mohou dále vylepšit jeho funkčnost a uživatelskou zkušenost.

Uchování stavu pomocí Local Storage

Můžete použít JavaScript (ačkoli to popírá čistě CSS přístup) a local storage k zapamatování stavu akordeonu, takže když se uživatel vrátí na stránku, dříve otevřené sekce zůstanou otevřené.

Dynamické načítání obsahu

Pro akordeony s velkým množstvím obsahu můžete obsah načítat dynamicky pomocí AJAXu. To může zlepšit počáteční dobu načítání stránky a snížit využití šířky pásma.

Řešení běžných problémů

Zde jsou některé běžné problémy, se kterými se můžete setkat při implementaci akordeonů pouze v CSS, a jak je vyřešit:

Příklady z praxe

Akordeony pouze v CSS lze použít v různých reálných scénářích:

Závěr

Akordeony pouze v CSS s funkcí jediné otevřené sekce nabízejí výkonný a efektivní způsob, jak zlepšit uživatelskou zkušenost a přístupnost na vašem webu. Využitím síly CSS selektorů a ARIA atributů můžete vytvářet interaktivní prvky, které jsou výkonné, udržovatelné a přístupné širokému spektru uživatelů. Ať už vytváříte jednoduchou stránku s často kladenými dotazy nebo komplexní webovou aplikaci, akordeony pouze v CSS vám mohou pomoci prezentovat informace jasným a poutavým způsobem, což přispívá k lepší celkové uživatelské zkušenosti pro globální publikum.

Další zdroje pro studium