مواد کو چھپانے اور ظاہر کرنے کے لیے صرف HTML کے لیے ایکارڈین بنائیں (کوئی جے ایس یا سی ایس ایس نہیں)

in وسائل اور اوزار

کیا آپ جانتے ہیں کہ مواد کو چھپانے اور ظاہر کرنے کے لیے بہت آسانی سے ایکارڈین بنانے کے لیے ایک مقامی HTML5 حل موجود ہے کوئی جاوا اسکرپٹ یا CSS نہیں۔. طریقہ معلوم کرنے کے لیے پڑھیں۔

html5 accordion

۔ اور 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 اور یہ *قابل رسائی* ہونا چاہیے لیکن پتہ چلا ہے کہ اصل ظاہر شدہ متن کا ہمیشہ اسکرین ریڈر کے ذریعہ درست اعلان نہیں کیا جاتا ہے۔

حوالہ جات:

مصنف کے بارے میں

میٹ اہلگن

Mathias Ahlgren کے سی ای او اور بانی ہیں۔ Website Ratingایڈیٹرز اور مصنفین کی ایک عالمی ٹیم کو چلانا۔ اس نے انفارمیشن سائنس اور مینجمنٹ میں ماسٹرز کیا ہے۔ یونیورسٹی کے دوران ویب ڈویلپمنٹ کے ابتدائی تجربات کے بعد اس کا کیریئر SEO کی طرف متوجہ ہوا۔ SEO، ڈیجیٹل مارکیٹنگ، اور ویب ڈویلپمنٹ میں 15 سال سے زیادہ کے ساتھ۔ اس کی توجہ میں ویب سائٹ سیکیورٹی بھی شامل ہے، جس کا ثبوت سائبر سیکیورٹی میں ایک سرٹیفکیٹ سے ملتا ہے۔ یہ متنوع مہارت اس کی قیادت کو مضبوط کرتی ہے۔ Website Rating.

ہوم پیج (-) » وسائل اور اوزار » مواد کو چھپانے اور ظاہر کرنے کے لیے صرف HTML کے لیے ایکارڈین بنائیں (کوئی جے ایس یا سی ایس ایس نہیں)

باخبر رہیں! ہمارے نیوز لیٹر میں شامل ہوں۔
ابھی سبسکرائب کریں اور صرف سبسکرائبر گائیڈز، ٹولز اور وسائل تک مفت رسائی حاصل کریں۔
آپ کسی بھی وقت ان سبسکرائب کر سکتے ہیں۔ آپ کا ڈیٹا محفوظ ہے۔
باخبر رہیں! ہمارے نیوز لیٹر میں شامل ہوں۔
ابھی سبسکرائب کریں اور صرف سبسکرائبر گائیڈز، ٹولز اور وسائل تک مفت رسائی حاصل کریں۔
آپ کسی بھی وقت ان سبسکرائب کر سکتے ہیں۔ آپ کا ڈیٹا محفوظ ہے۔
بتانا...