एकॉर्डियन क्या है और कब इस्तेमाल करें

एकॉर्डियन एक इंटरफेस पैटर्न है जिसमें कंटेंट सेक्शन को टॉगल करके दिखाया या छिपाया जाता है। यह लंबा कंटेंट छोटे हिस्सों में बाँट देता है, जिससे पेज साफ़ और पढ़ने में आसान रहता है। अक्सर FAQ, टेबल डेटा, या मोबाइल में लम्बी सूचियों के लिए एकॉर्डियन बढ़िया रहता है।

आपने देखा होगा कि मोबाइल पर पेज लंबा होने पर लोग जल्दी पास कर देते हैं—एकॉर्डियन से पढ़ने का अनुभव बेहतर बनता है और यूजर को वही जानकारी जल्दी मिल जाती है जो वो ढूँढ रहा है। पर ध्यान रखें: हर जगह एकॉर्डियन लगाना जरूरी नहीं, जब पढ़ने की निरंतरता जरूरी हो (जैसे एक कहानी) तब उसे खुला ही रखना बेहतर है।

एकॉर्डियन बनाते वक्त ध्यान देने योग्य बातें

आइए सीधे उपयोगी टिप्स पर आते हैं — जिन्हें हमने प्रैक्टिकल पलों से चुना है:

• साधारण HTML संरचना रखें: सेक्शन के हेडर बटन होना चाहिए और कंटेंट एक कंटेनर में।
• एक्सेसिबिलिटी जोड़ें: ARIA attribute जैसे aria-expanded और aria-controls लगाएं ताकि स्क्रीन रीडर सही जानकारी दे सके।
• SEO पर ध्यान दें: जरूरी टेक्स्ट DOM में रखें, सिर्फ CSS/JS से छुपाएं—ताकि सर्च इंजन और स्क्रीन रीडर उसे पढ़ सकें।
• परफॉर्मेंस आसान रखें: भारी लाइब्रेरी की बजाय हल्का JS या CSS-only तरीका इस्तेमाल करें।
• मोबाइल मित्रता: टच एरिया बड़ा रखें और ऐनिमेशन हल्की रखें ताकि लैग कम हो।

तेज़ और साधारण उदाहरण (HTML + CSS + JS)

नीचे छोटा सा उदाहरण है जो आप सीधे अपनी साइट पर इस्तेमाल कर सकते हैं। इसे अपने अनुरूप टिक-अप कर लें:

<button class="acc-btn" aria-expanded="false" aria-controls="acc1" id="btn1">सवाल 1</button>
<div id="acc1" class="acc-panel" hidden>
  <p>यह जवाब है।</p>
</div>

<script>
document.querySelectorAll('.acc-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const panel = document.getElementById(btn.getAttribute('aria-controls'));
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!expanded));
    if (!expanded) panel.hidden = false; else panel.hidden = true;
  });
});
</script>

यह छोटा कोड ARIA के साथ काम करता है और बिना भारी फ्रेमवर्क के सटीक परिणाम देता है। CSS में आप transition जोड़ कर अच्छा फील दे सकते हैं, लेकिन ज्यादा भारी ऐनिमेशन से बचें।

अंततः, एक अच्छा एकॉर्डियन यूजर की ज़रूरत पर केंद्रित होता है: तेज़ लोड, आसान नेविगेशन और स्क्रीन रीडर‑फ्रेंडली। अगर आप साइट के FAQ, प्रोडक्ट स्पेसिफिकेशन या लम्बे आर्टिकल में अच्छा UX चाहते हैं तो एकॉर्डियन बहुत मददगार है। हमारी साइट पर 'एकॉर्डियन' टैग से जुड़े और उदाहरण देखें और अपनी वेबसाइट के लिए तुरंत लागू करें।