Luo vain HTML-muotoinen harmonikka sisällön piilottamiseksi ja paljastamiseksi (ei JS- tai CSS-syötteitä)

in Resurssit ja työkalut

Tiesitkö, että on olemassa natiivi HTML5-ratkaisu, jolla voit helposti luoda haitarille enemmän/vähemmän -painikkeen sisällön piilottamiseksi ja paljastamiseksi EI JavaScriptiä tai CSS:ää. Lue lisää saadaksesi selville, miten.

html5 harmonikka

- ja HTML5-tunnisteet ovat virallisesti a ilmoitus-widget-elementti, Mutta pariksi kanssa HTML5-tunnisteet antavat sinulle a puhdasta HTML-harmonikkaa.

Merkitys ei JS tai CSS tarvitaan. Kuinka siistiä!

Tässä on esimerkki yksinkertaisesta elementistä, jossa on a ja .

Tässä koodi:

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

ja tältä se näyttää:

Lue lisää

Tämä on natiivi HTML5-haitari sisällön piilottamiseen ja paljastamiseen. Aika siistiä, eikö?

Miten tämä toimii? -  tag toimii kääreenä elementille, joka voidaan avata tai sulkea. Käyttäjän on napsautettava etikettiä, joka on -tunniste avataksesi tai sulkeaksesi elementin.

Entä tyyli ja käytös?

Tyylit

Voit mukauttaa paljastavan tekstiruudun ulkoasua CSS-tyylillä. Alla on välilehdellä varustettu käyttöliittymätyyli:

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

Oletusarvon mukaan kohdistin näyttää nuolena, mutta jos haluat sen olevan a osoittava käsi käytä sen sijaan tätä:

details {
cursor: pointer;
}

käyttäytymistä

Käyttäytymisen asettaminen on hyvin rajallista, voit tehdä vain yhden asian ja se on tehdä paljastettu teksti oletuksena auki.

Käynnistä haitari sen avoimessa tilassa lisäämällä Boolen avata ominaisuus tunnisteet:

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

Tämä on natiivi HTML5-haitari sisällön piilottamiseen ja paljastamiseen. Aika siistiä, eikö?

Mitä ominaisuuksia voin käyttää?

Alla olevia määritteitä voidaan käyttää tunnisteet:

OminaisuusArvoYhteenveto
avataavataOletus on ei auki.
id  arvoTarjoaa yksilöllisen tunnisteen.
luokka  luokkien nimetAntaa elementille luokkien nimet.
tyyli  CSS-arvotMäärittää elementille CSS-tyylejä.

Joten mitkä ovat rajoitukset? Aina on saalis, eikö?

Ei tukea Internet Explorerille

Tämä vain HTML5:lle tarkoitettu haitari ei toimi missään Internet Explorerin versiossa. Jos sen on tuettava IE11:tä, sinun on käytettävä toista vararatkaisua JQueryn avulla. Kaikki muut selaimet tukevat ja .

Ei mukautettuja animaatioita tai siirtymiä

Vaikka voit muokata ulkoasua ja tyyliä (kuten yllä näkyy), et voi tehdä tekstistä, joka paljastaa animaatioita tai siirtymiä. Jos haluat tehdä niin, tarvitset toisen CSS/JSS harmonikkaratkaisun.

Näytönlukijat ja esteettömyys

Tämä on syntyperäinen HTML5 ja sen *pitäisi olla* saavutettavissa, mutta on havaittu, että näytönlukuohjelma ei aina ilmoita todellista paljastettua tekstiä oikein.

Viitteet:

Author

Matt Ahlgren

Mathias Ahlgren on toimitusjohtaja ja perustaja Website Rating, joka ohjaa maailmanlaajuista toimittajien ja kirjoittajien tiimiä. Hän on koulutukseltaan tietotieteen ja johtamisen maisteri. Hänen uransa kääntyi hakukoneoptimointiin yliopiston aikaisten verkkokehityskokemusten jälkeen. Yli 15 vuotta hakukoneoptimoinnin, digitaalisen markkinoinnin ja verkkokehittäjien parissa. Hänen painopisteensä sisältää myös verkkosivustojen turvallisuuden, josta todisteena on kyberturvallisuussertifikaatti. Tämä monipuolinen asiantuntemus tukee hänen johtajuutta Website Rating.

Etusivu » Resurssit ja työkalut » Luo vain HTML-muotoinen harmonikka sisällön piilottamiseksi ja paljastamiseksi (ei JS- tai CSS-syötteitä)
Jakaa...