Búðu til HTML harmonikku -> Fela og sýna efni án JS/CSS

Vissir þú að það er til innbyggð HTML5 lausn til að búa til hnapp til að lesa meira/minna á harmonikku til að fela og sýna efni með EKKERT JavaScript eða CSS. Lestu áfram til að komast að því hvernig.

The og HTML5 merki eru opinberlega a upplýsingagræjuþáttur, En parað við HTML5 merki gefa þér a hrein harmonikka eingöngu HTML.

Merking engin JS EÐA CSS er þörf á. Hversu flott er það!

Hér er dæmi sem sýnir einfaldan þátt með a og .

Hér er kóðinn:

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

og svona mun það líta út:

Lestu meira

Þetta er innfædd HTML5 harmonikka til að fela og sýna efni. Frekar flott, ekki satt?

Hvernig virkar það? The Merkið þjónar sem umbúðir fyrir frumefni sem hægt er að opna eða loka. Notandinn verður að smella á merkimiðann sem er merkið til að opna eða loka þættinum.

Hvað með stíl og hegðun?

Styles

Þú getur notað CSS stíl til að sérsníða útlit textareitsins. Hér að neðan gefur viðmótsstíl með flipa:

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

Sjálfgefið er að bendillinn birtist eins og ör, en ef þú vilt að hann sé a bendi hönd notaðu þetta í staðinn:

details {
cursor: pointer;
}

Hegðun

Stillingarhegðun er mjög takmörkuð, það er í raun aðeins eitt sem þú getur gert og það er að búa til opinbera textann opna sjálfgefið.

Til að ræsa harmonikkuna í opnu ástandi skaltu bæta við Boolean opna eiginleiki til merki:

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

Lestu meira

Þetta er innfædd HTML5 harmonikka til að fela og sýna efni. Frekar flott, ekki satt?

Hvaða eiginleika get ég notað?

Hægt er að nota eftirfarandi eiginleika fyrir merki:

Eigindi	gildi	Yfirlit
opna	opna	Sjálfgefið er ekki opinn.
id	gildi	Veitir einstakt auðkenni.
flokkur	bekkjarheiti	Úthlutar flokksnöfnum til frumefnisins.
stíl	CSS-gildi	Úthlutar CSS-stílum til frumefnisins.

Svo hverjar eru takmarkanirnar? Það er alltaf gripur, er það ekki?

Enginn stuðningur fyrir Internet Explorer

Þessi HTML5 harmonikka mun ekki virka í neinni útgáfu af Internet Explorer. Ef þú þarft að hafa það að styðja IE11 verður þú að nota aðra varalausn með JQuery. Allir aðrir vafrar styðja og .

Engar sérsniðnar hreyfimyndir eða umbreytingar

Þó að þú getir breytt og stílað útlitið (eins og sýnt er hér að ofan), muntu ekki geta gert neinn texta til að sýna hreyfimyndir eða umbreytingar. Ef þú vilt gera það þarftu aðra CSS/JSS harmonikkulausn.

Skjálesarar og aðgengi

Þetta er innfæddur HTML5 og það *ætti að vera* aðgengilegt en hefur komið í ljós að raunverulegur opinberaður texti er ekki alltaf tilkynntur rétt af skjálesara.

Tilvísanir: