کیا آپ جانتے ہیں کہ مواد کو چھپانے اور ظاہر کرنے کے لیے بہت آسانی سے ایکارڈین بنانے کے لیے ایک مقامی HTML5 حل موجود ہے کوئی جاوا اسکرپٹ یا CSS نہیں۔. طریقہ معلوم کرنے کے لیے پڑھیں۔
۔ اور HTML5 ٹیگز سرکاری طور پر ایک ہیں۔ انکشاف ویجیٹ عنصر، لیکن ساتھ جوڑا بنا HTML5 ٹیگز آپ کو a خالص HTML صرف accordion.
مطلب کوئی JS یا CSS نہیں۔ ضرورت ہے. یہ کتنا ٹھنڈا ہے!
یہاں ایک مثال ہے جس میں ایک سادہ عنصر دکھایا گیا ہے۔ اور .
کوڈ یہ ہے:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>اور یہ کیسا نظر آئے گا:
مزید پڑھئیے
یہ مواد کو چھپانے اور ظاہر کرنے کے لیے ایک مقامی HTML5 accordion ہے۔ بہت اچھا، ٹھیک ہے؟
یہ کس طرح کام کرتا ہے؟ ۔ ٹیگ ایک عنصر کے لیے ریپر کے طور پر کام کرتا ہے جسے کھولا یا بند کیا جا سکتا ہے۔ صارف کو اس لیبل پر کلک کرنا ہوگا۔ عنصر کو کھولنے یا بند کرنے کے لیے ٹیگ کریں۔
اسٹائل اور طرز عمل کے بارے میں کیا خیال ہے؟
طرزیں
آپ ظاہر ٹیکسٹ باکس کی ظاہری شکل کو اپنی مرضی کے مطابق بنانے کے لیے 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;
}پہلے سے طے شدہ طور پر، کرسر تیر کی طرح ظاہر ہوتا ہے، لیکن اگر آپ چاہتے ہیں کہ یہ a ہو۔ اشارہ کرنے والا ہاتھ اس کے بجائے پھر اسے استعمال کریں:
details {
cursor: pointer;
}بہبود
طرز عمل ترتیب دینا بہت محدود ہے، واقعی میں صرف ایک ہی کام ہے جو آپ کر سکتے ہیں اور وہ ہے انکشاف شدہ متن بنانا پہلے سے طے شدہ طور پر کھولیں۔.
ایکارڈین کو کھلی حالت میں شروع کرنے کے لیے، بولین شامل کریں۔ کھول کی طرف منسوب ٹیگ:
<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 طرزیں تفویض کرتا ہے۔ |
تو کیا حدود ہیں؟ ہمیشہ ایک کیچ ہے، ہے نا؟
انٹرنیٹ ایکسپلورر کے لیے کوئی سپورٹ نہیں ہے۔
یہ HTML5 صرف ایکارڈین انٹرنیٹ ایکسپلورر کے کسی بھی ورژن میں کام نہیں کرے گا۔ اگر آپ کو IE11 کو سپورٹ کرنا ہے تو آپ کو JQuery کا استعمال کرتے ہوئے ایک مختلف فال بیک حل استعمال کرنا پڑے گا۔ دوسرے تمام براؤزر سپورٹ کرتے ہیں۔ اور .
کوئی حسب ضرورت متحرک تصاویر یا ٹرانزیشن نہیں۔
جب کہ آپ ظاہری شکل میں ترمیم اور اسٹائل بنا سکتے ہیں (جیسا کہ اوپر دکھایا گیا ہے)، آپ کوئی متن ظاہر کرنے کے لیے متحرک تصاویر یا ٹرانزیشن نہیں کر پائیں گے۔ اگر آپ ایسا کرنا چاہتے ہیں تو آپ کو ایک اور CSS/JSS accordion حل کی ضرورت ہوگی۔
اسکرین ریڈرز اور رسائی
یہ دیسی ہے۔ HTML5 اور یہ *قابل رسائی* ہونا چاہیے لیکن پتہ چلا ہے کہ اصل ظاہر شدہ متن کا ہمیشہ اسکرین ریڈر کے ذریعہ درست اعلان نہیں کیا جاتا ہے۔
حوالہ جات:
