ڇا توهان کي خبر آهي ته هتي هڪ مقامي HTML5 حل آهي آساني سان هڪ accordion ٺاهڻ لاءِ وڌيڪ/گهٽ بٽڻ سان مواد کي لڪائڻ ۽ ظاهر ڪرڻ لاءِ NO JavaScript يا CSS. انهي کي ڳولڻ لاء پڙهو ته ڪيئن.
هن ۽ HTML5 ٽيگ سرڪاري طور تي a ظاهر ڪرڻ ويجيٽ عنصر، پر سان جوڙيو ويو HTML5 ٽيگ توهان کي ڏيندو خالص HTML-صرف accordion.
معني نه JS يا CSS جي ضرورت آهي. اهو ڪيترو ٿڌو آهي!
هتي هڪ مثال آهي هڪ سادي عنصر ڏيکاريندي a سان ۽ .
هتي ڪوڊ آهي:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>۽ هتي اهو ڪيئن نظر ايندو:
وڌيڪ پڙهو
هي مواد لڪائڻ ۽ ظاهر ڪرڻ لاءِ هڪ ڏيهي HTML5 accordion آهي. تمام سٺو، صحيح؟
ان کي ڪيئن ڪم ڪندو؟ هن tag هڪ عنصر لاء هڪ لفافي طور ڪم ڪري ٿو جيڪو کوليو يا بند ڪري سگهجي ٿو. استعمال ڪندڙ کي ليبل تي ڪلڪ ڪرڻو پوندو جيڪو آهي عنصر کي کولڻ يا بند ڪرڻ لاءِ ٽيگ.
انداز ۽ رويي بابت ڇا؟
موزون
توهان لاڳو ڪري سگهو ٿا CSS اسٽائلنگ ظاهر ڪرڻ واري ٽيڪسٽ باڪس جي ظاهر کي ترتيب ڏيڻ لاءِ. هيٺ ڏنل ٽيب ٿيل انٽرفيس انداز ڏئي ٿو:
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;
}ڊفالٽ طور، ڪرسر هڪ تير وانگر ظاهر ٿئي ٿو، پر جيڪڏهن توهان چاهيو ٿا ته اهو هجي اشارو ڪندڙ هٿ ان جي بدران ان کي استعمال ڪريو:
details {
cursor: pointer;
}رويي
سيٽنگ جي رويي تمام محدود آهي، حقيقت ۾ صرف هڪ شيء آهي جيڪو توهان ڪري سگهو ٿا ۽ اهو آهي نازل ڪيل متن ٺاهڻ ڊفالٽ طور کوليو.
ان جي کليل حالت ۾ accordion شروع ڪرڻ لاء، Boolean شامل ڪريو کليل ڏانهن منسوب ڳولهي:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>وڌيڪ پڙهو
هي مواد لڪائڻ ۽ ظاهر ڪرڻ لاءِ هڪ ڏيهي HTML5 accordion آهي. تمام سٺو، صحيح؟
مان ڪهڙيون خاصيتون استعمال ڪري سگهان ٿو؟
ھيٺ ڏنل خاصيتون استعمال ڪري سگھجن ٿيون ڳولهي:
| صفات | قدر | خلاصو |
|---|---|---|
| کليل | کليل | ڊفالٽ آهي نه کولي. |
| id | قدر | هڪ منفرد سڃاڻپ ڪندڙ مهيا ڪري ٿو. |
| ڪلاس | ڪلاس جا نالا | ڪلاس جا نالا عنصر کي تفويض ڪري ٿو. |
| انداز | CSS-values | سي ايس ايس اسٽائل کي عنصر کي تفويض ڪري ٿو. |
پوءِ ڪهڙيون حدون آهن؟ اتي هميشه هڪ پڪڙي آهي، اهو ناهي؟
انٽرنيٽ ايڪسپلورر لاءِ ڪا به سپورٽ ناهي
هي HTML5-صرف accordion انٽرنيٽ ايڪسپلورر جي ڪنهن به ورزن ۾ ڪم نه ڪندو. جيڪڏهن توهان وٽ آهي ته اهو IE11 جي حمايت ڪري ٿو توهان کي JQuery استعمال ڪندي هڪ مختلف فال بيڪ حل استعمال ڪرڻو پوندو. ٻيا سڀئي برائوزر سپورٽ ڪن ٿا ۽ .
ڪابه ڪسٽمائيز متحرڪ يا منتقلي
جڏهن توهان ظهور کي تبديل ۽ انداز ڪري سگهو ٿا (جيئن مٿي ڏيکاريل آهي)، توهان ڪنهن به متن کي ظاهر ڪرڻ واري اينيميشن يا منتقلي ڪرڻ جي قابل نه هوندا. جيڪڏهن توهان اهو ڪرڻ چاهيو ٿا ته توهان کي هڪ ٻيو CSS/JSS accordion حل جي ضرورت پوندي.
اسڪرين ريڊر ۽ رسائي
هي ديسي آهي HTML5 ۽ ان کي *پهچڻ* گهرجي پر اهو معلوم ڪيو ويو آهي ته اصل ظاهر ڪيل متن هميشه اسڪرين ريڊر طرفان صحيح طور تي اعلان نه ڪيو ويو آهي.
حوالا:
