Utwórz akordeon w formacie HTML, aby ukryć i ujawnić zawartość (bez JS i CSS)

in Zasoby i narzędzia

Czy wiesz, że istnieje natywne rozwiązanie HTML5 do bardzo łatwego tworzenia akordeonowego przycisku czytaj więcej/mniej do ukrywania i ujawniania treści za pomocą BEZ JavaScript i CSS. Czytaj dalej, aby dowiedzieć się, jak.

html5 akordeon

Połączenia i Tagi HTML5 są oficjalnie element widżetu ujawniania, Ale sparowane z Tagi HTML5 zapewnią Ci czysty akordeon tylko w HTML.

Znaczenie brak JS LUB CSS jest potrzebne. Jakie to jest świetne!

Oto przykład pokazujący prosty element z a i .

Oto kod:

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

a oto jak to będzie wyglądać:

Czytaj więcej

Jest to natywny akordeon HTML5 do ukrywania i ujawniania treści. Całkiem fajnie, prawda?

Jak to działa? Połączenia  tag służy jako opakowanie na element, który można otwierać lub zamykać. Użytkownik musi kliknąć etykietę, która jest tag, aby otworzyć lub zamknąć element.

A co ze stylem i zachowaniem?

style

Możesz zastosować styl CSS, aby dostosować wygląd odsłoniętego pola tekstowego. Poniżej przedstawiono styl interfejsu z zakładkami:

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

Domyślnie kursor wygląda jak strzałka, ale jeśli chcesz, aby był wskazując ręką zamiast tego użyj tego:

details {
cursor: pointer;
}

Zachowania

Ustawienie zachowań jest bardzo ograniczone, tak naprawdę jest tylko jedna rzecz, którą możesz zrobić, a jest nią ujawniony tekst otwarte domyślnie.

Aby uruchomić akordeon w stanie otwartym, dodaj Boolean koncepcja atrybut do etykietka:

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

Jest to natywny akordeon HTML5 do ukrywania i ujawniania treści. Całkiem fajnie, prawda?

Jakich atrybutów mogę używać?

Poniższe atrybuty mogą być użyte dla etykietka:

AtrybutwartośćPodsumowanie
koncepcjakoncepcjaDomyślnie jest zamknięte.
id  wartośćZapewnia unikalny identyfikator.
klasa  nazwy klasPrzypisuje nazwy klas do elementu.
styl  Wartości CSSPrzypisuje style CSS do elementu.

Jakie są ograniczenia? Zawsze jest jakiś haczyk, prawda?

Brak wsparcia dla Internet Explorera

Ten akordeon obsługujący tylko język HTML5 nie będzie działał w żadnej wersji przeglądarki Internet Explorer. Jeśli musisz mieć obsługę IE11, będziesz musiał użyć innego rozwiązania awaryjnego przy użyciu JQuery. Wszystkie inne przeglądarki obsługują i .

Brak niestandardowych animacji i przejść

Chociaż możesz modyfikować i stylizować wygląd (jak pokazano powyżej), nie będziesz w stanie wykonać żadnych animacji ani przejść odsłaniających tekst. Jeśli chcesz to zrobić, potrzebujesz innego rozwiązania akordeonowego CSS/JSS.

Czytniki ekranu i ułatwienia dostępu

To jest rodzime HTML5 i *powinna* być dostępna, ale okazało się, że faktycznie ujawniony tekst nie zawsze jest poprawnie odczytywany przez czytnik ekranu.

Referencje:

o autorze

Matt Ahlgren

Mathias Ahlgren jest dyrektorem generalnym i założycielem Website Rating, kierując globalnym zespołem redaktorów i pisarzy. Posiada tytuł magistra w zakresie informatyki i zarządzania. Po wczesnych doświadczeniach z tworzeniem stron internetowych na studiach jego kariera skupiła się na SEO. Z ponad 15-letnim doświadczeniem w SEO, marketingu cyfrowym i tworzeniu stron internetowych. Zajmuje się także bezpieczeństwem stron internetowych, czego dowodem jest certyfikat Cyber ​​Security. Ta różnorodna wiedza specjalistyczna leży u podstaw jego przywództwa w firmie Website Rating.

Bądź na bieżąco! Dołącz do naszego newslettera
Zasubskrybuj teraz i uzyskaj bezpłatny dostęp do przewodników, narzędzi i zasobów tylko dla subskrybentów.
Możesz zrezygnować z subskrypcji w dowolnym momencie. Twoje dane są bezpieczne.
Bądź na bieżąco! Dołącz do naszego newslettera
Zasubskrybuj teraz i uzyskaj bezpłatny dostęp do przewodników, narzędzi i zasobów tylko dla subskrybentów.
Możesz zrezygnować z subskrypcji w dowolnym momencie. Twoje dane są bezpieczne.
Dzielić się z...