Napravite harmoniku samo za HTML za skrivanje i otkrivanje sadržaja (bez JS-a ili CSS-a)

in Resursi i alati

Jeste li znali da postoji izvorno HTML5 rješenje za vrlo jednostavnu izradu harmonike za čitanje više/manje gumba za skrivanje i otkrivanje sadržaja s BEZ JavaScripta ili CSS-a. Čitajte dalje da biste saznali kako.

html5 harmonika

Korištenje električnih romobila ističe i HTML5 oznake službeno su a element widgeta za otkrivanje, Ali uparen sa HTML5 oznake će vam dati čista harmonika samo za HTML.

Značenje nema JS ILI CSS potrebno je. Kako je to cool!

Evo primjera koji prikazuje jednostavan element s a i .

Evo koda:

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

a evo kako će to izgledati:

opširnije

Ovo je izvorna HTML5 harmonika za skrivanje i otkrivanje sadržaja. Prilično cool, zar ne?

Kako radi? Korištenje električnih romobila ističe  tag služi kao omotač za element koji se može otvoriti ili zatvoriti. Korisnik mora kliknuti na oznaku koja je oznaku za otvaranje ili zatvaranje elementa.

Što je sa stajlingom i ponašanjem?

Stilovi

Možete primijeniti CSS stil kako biste prilagodili izgled tekstualnog okvira za otkrivanje. Dolje daje stil sučelja s karticama:

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

Prema zadanim postavkama, kursor se pojavljuje kao strelica, ali ako želite da bude a pokazujući rukom umjesto toga upotrijebi ovo:

details {
cursor: pointer;
}

ponašanja

Postavljanje ponašanja je vrlo ograničeno, zapravo postoji samo jedna stvar koju možete učiniti, a to je napraviti otkriveni tekst otvoreno prema zadanim postavkama.

Da biste pokrenuli harmoniku u otvorenom stanju, dodajte Booleovu vrijednost otvoriti atribut označiti:

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

Ovo je izvorna HTML5 harmonika za skrivanje i otkrivanje sadržaja. Prilično cool, zar ne?

Koje atribute mogu koristiti?

Atributi u nastavku mogu se koristiti za označiti:

AtributJoš malo brojevarezime
otvoritiotvoritiZadana vrijednost je nije otvoreno.
id  vrijednostPruža jedinstveni identifikator.
razred  nazivi klasaDodjeljuje nazive klasa elementu.
stil  CSS-vrijednostiDodjeljuje CSS stilove elementu.

Dakle, koja su ograničenja? Uvijek postoji neka kvaka, zar ne?

Nema podrške za Internet Explorer

Ova harmonika samo za HTML5 neće raditi ni u jednoj verziji Internet Explorera. Ako morate imati podršku za IE11, morat ćete koristiti drugo zamjensko rješenje koristeći JQuery. Svi ostali preglednici podržavaju i .

Nema prilagođenih animacija ili prijelaza

Iako možete mijenjati i stilizirati izgled (kao što je gore prikazano), nećete moći raditi animacije ili prijelaze za otkrivanje teksta. Ako to želite učiniti, trebat će vam drugo CSS/JSS harmonika rješenje.

Čitači zaslona i pristupačnost

Ovo je izvorno HTML5 i *trebao bi biti* dostupan, ali otkriveno je da čitač zaslona ne najavljuje uvijek ispravno stvarni otkriveni tekst.

Reference:

O autoru

Matt Ahlgren

Mathias Ahlgren je izvršni direktor i osnivač Website Rating, upravljajući globalnim timom urednika i pisaca. Magistrirao je informacijske znanosti i menadžment. Njegova se karijera okrenula SEO-u nakon ranih iskustava u razvoju weba tijekom studija. S više od 15 godina u SEO-u, digitalnom marketingu i web razvoju. Njegov fokus također uključuje sigurnost web stranica, što dokazuje certifikat za Cyber ​​Security. Ova raznolika stručnost podupire njegovo vodstvo u Website Rating.

Početna » Resursi i alati » Napravite harmoniku samo za HTML za skrivanje i otkrivanje sadržaja (bez JS-a ili CSS-a)
Podijeli na...