Abuur HTML Accordion -> Qari oo Muuji waxa ku jira JS/CSS la'aanteed

Ma ogtahay in uu jiro xal HTML5 asal ah si aad si fudud u abuurto accordion akhri wax ka badan/yar badhanka si aad u qariso oo u muujiso waxa ku jira Ma jiro JavaScript ama CSS. Akhri si aad u ogaato sida.

The iyo HTML5 tags si rasmi ah a muujinta xubin widget, laakiin lagu daray HTML5 tags ayaa ku siin doona a saafi ah HTML-kaliya accordion.

taasoo la micno ah ma jiro JS AMA CSS loo baahan yahay. Sidee u fiican taasi!

Halkan waxaa ah tusaale muujinaya curiye fudud oo leh a iyo .

Waa tan lambarka:

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

waana kan sida ay u ekaan doonto:

Kani waa accordion HTML5 asal ah si loo qariyo loona muujiyo waxa ku jira. Aad u fiican, sax?

Sidee u shaqeeyaan? The tag waxay u adeegtaa sida duubka shay la furi karo ama la xidhi karo. Isticmaaluhu waa inuu gujiyaa calaamadda taas oo ah tag si aad u furto ama u xirto curiyaha.

Ka waran hab-dhaqanka iyo hab-dhaqanka?

Hababka

Waxaad codsan kartaa qaabaynta CSS si aad u habayso muuqaalka sanduuqa qoraalka muujinta. Hoosku wuxuu bixiyaa qaab interface tabbed:

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

Sida caadiga ah, cursorku wuxuu u muuqdaa sida fallaadho, laakiin haddii aad rabto inay noqoto a gacanta ku fiiqaya halkii ka dibna isticmaal kan:

details {
cursor: pointer;
}

Dabeecadaha

Dejinta dabeecadaha aad ayey u xaddidan yihiin, runtii waxaa jira hal shay oo aad sameyn karto oo ah inaad sameyso qoraalka la muujiyey furan si default.

Si aad u bilawdo accordion xaaladdeeda furan, ku dar Boolean furan sifo ah sumad:

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

Kani waa accordion HTML5 asal ah si loo qariyo loona muujiyo waxa ku jira. Aad u fiican, sax?

Sifooyinkee ayaan isticmaali karaa?

Sifooyinka hoose waxaa loo isticmaali karaa sumad:

sifo	Qiimaha	Summary
furan	furan	Default waa ma furna.
id	qiimaha	Waxay bixisaa aqoonsi gaar ah.
fasalka	fasalada	U qoondeeya magacyo fasalka qaybta.
style	CSS-qiimaha	Waxay u xilsaartaa qaababka CSS curiyaha.

Haddaba waa maxay xaddidaaddu? Had iyo jeer waxa jira qabsasho, miyaanay ahayn?

Wax taageero ah uma hayo Internet Explorer

Accordion-ka HTML5-kaliya kama shaqayn doono nooc kasta oo Internet Explorer ah. Haddii ay tahay inaad haysato taageerada IE11 waa inaad isticmaashaa xal dib-u-dhac ka duwan adoo isticmaalaya JQuery. Dhammaan daalacashada kale waxay taageeraan iyo .

Ma jiro animations la habeeyey ama wareejinta

Markaad wax ka beddeli karto oo aad qaabayn karto muuqaalka (sida kor ku cad), ma awoodi doontid inaad sameyso wax qoraal ah oo muujinaya animations ama kala-guurka. Haddii aad rabto inaad taas samayso waxaad u baahan doontaa xal kale oo CSS/JSS ah.

Akhristayaasha shaashadda iyo helitaan

Tani waa waddan HTML5 waana * inay ahaato * la heli karo laakiin waxaa la ogaaday in qoraalka dhabta ah uusan had iyo jeer si sax ah ugu dhawaaqin akhristaha shaashadda.

Tixraacyo: