CSS अकॉर्डियन व्यापक रूप से विस्तार योग्य और संक्षिप्त करने योग्य मेनू, स्निपेट, चित्र, वीडियो, अक्सर पूछे जाने वाले प्रश्न, सूची और लेख अंश के लिए उपयोग किए जाते हैं। आप उन्हें HTML, CSS और JavaScript (या jQuery) का उपयोग करके आसानी से बना सकते हैं। CSS-only अकॉर्डियन बनाना थोड़ा चुनौतीपूर्ण काम है, लेकिन यह जावास्क्रिप्ट-अक्षम वातावरण में बहुत मददगार है।

इस गाइड में, आप केवल-सीएसएस अकॉर्डियन बनाने के लिए चरण-दर-चरण दृष्टिकोण सीखेंगे।

केवल HTML का उपयोग करके बेसिक अकॉर्डियन बनाना

यदि आपकी प्राथमिकता HTML का उपयोग करके एक सुलभ अकॉर्डियन बनाना है, तो तथा टैग जाने का रास्ता हैं। इससे कोई फर्क नहीं पड़ता कि आप किस प्रोग्रामिंग भाषा का उपयोग कर रहे हैं, केवल-एचटीएमएल अकॉर्डियन बरकरार रहेगा। बनाओ माता-पिता के रूप में टैग करें और प्रश्न को a. में दर्ज करें उपनाम। a. के अंदर एक वर्णनात्मक उत्तर लिखें उपनाम। किसी भी संख्या में अक्सर पूछे जाने वाले प्रश्नों के लिए प्रक्रिया को पुनरावृत्त करें।

अक्सर पूछे जाने वाले प्रश्न 1



लोरेम इप्सम डोलर, सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। राशन एडिपिसि इल्लम एरर, एचआईसी एक्सपेडिटा न्यूक्वम इंपिडिट एक्सप्लिकाबो विटे आईयूरे क्यूए वेरो ऑटम क्विआ क्विबसडैम टेम्पोरा एट हारुम पेरफेरेंडिस प्रिसेंटियम डोलर!





instagram viewer







अक्सर पूछे जाने वाले प्रश्न 2



एक्यूसेंटियम में कंसीकुंटूर ईयरम परियाटुर डोलोरेम रिपेलैट टेम्पोरिबस ड्यूसीमस सनट सस्पिट रिपुंडिए क्यूपिडिटेट रेकुसांडे टेम्पोरा सिंट एलिगेंडी, परफेरेंडिस एस्परनेचर आर्किटेक्टो वॉलुप्टस लेबरम एडिपिस्की नेक वॉलुपेट्स परिणामी 






अक्सर पूछे जाने वाले प्रश्न 3



टेनेटुर, एक्स डेलेक्टस, परफेरेंडिस एपेरियम वॉलुप्टेटम कॉन्सेक्वेंटूर मोलेस्टिया राशन रेरम विटे अब मोदी, माइनस प्लेसैट क्विस डिग्निसिमोस। डोलोरेम क्वाएराट ओडिट, उस्टो लेबरिओसम पॉसिमस, आर्किटेक्टो एलिकम कमोडी सेपिएंटे सेप सेक्वी और एलिगेंडी हिक रेप्रेहेंडरिट रिपेलेंडस क्वोस में!

अकॉर्डियन को स्टाइल करना

आप अकॉर्डियन को एडजस्ट करके स्टाइल कर सकते हैं पीछे का रंग, बॉर्डर-त्रिज्या, हाशिया, गद्दी, आदि।

तन {
 फ़ॉन्ट-फ़ैमिली: 'लुसीडा सैन्स', 'ल्यूसिडा सैन्स रेगुलर', 'लुसीडा ग्रांडे', 'लुसीडा सैन्स यूनिकोड', जिनेवा, वर्दाना, सेन्स-सेरिफ़;
 अधिकतम-चौड़ाई: 30rem;
 मार्जिन: 1.5rem ऑटो;
}
सारांश {
 फ़ॉन्ट-वजन: 600;
 रंग: आरजीबी (255, 255, 255);
 पृष्ठभूमि-रंग: आरजीबी (7, 185, 255);
 गद्दी: 1.2rem;
 मार्जिन-नीचे: 1.2rem;
 सीमा-त्रिज्या: 0.5rem;
 कर्सर: सूचक;
}

आउटपुट:

केवल सीमा यह है कि कोड के प्रत्येक भाग पर आपका नियंत्रण नहीं होगा। HTML संरचना को संशोधित किया जा सकता है, लेकिन आप एक कस्टम अकॉर्डियन नहीं बना सकते। इसलिए, आइए उन्नत CSS का उपयोग करके एक कस्टम FAQ अनुभाग बनाएं।

अपना कस्टम एफएक्यू अनुभाग बनाएं

कस्टम CSS-only अकॉर्डियन बनाने की दो लोकप्रिय विधियाँ हैं। आप या तो चेकबॉक्स या रेडियो बटन का उपयोग कर सकते हैं; हम दोनों विधियों की व्याख्या करेंगे।

चेकबॉक्स विधि का उपयोग करना

चेकबॉक्स विधि का उपयोग करता है चेक बॉक्स इनपुट प्रकार के रूप में। जब भी कोई उपयोगकर्ता किसी टैब का चयन करता है, तो वे चेकबॉक्स को चिह्नित करते हैं और यह खुल जाता है। आप चेकबॉक्स विधि का उपयोग करके एक साथ कई टैब खोल सकते हैं, ठीक उसी तरह जैसे आप एक के अंदर एक से अधिक चेकबॉक्स को चिह्नित कर सकते हैं एचटीएमएल फॉर्म.

एचटीएमएल

कस्टम सीएसएस ओनली अकॉर्डियन (अक्सर पूछे जाने वाले प्रश्न)

चेकबॉक्स विधि का उपयोग करना






केवल CSS का उपयोग करके एक कस्टम अकॉर्डियन कैसे बनाएं?


 लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। हारुम डेबिटिस वोलुप्टस एलिकिड टेनटुर क्वास सस्पिट
 असेंडा ए, नेस्कियंट ईम नोबिस ईक, एक्सर्सिटेम डिसिफिकियो उर्फ ​​उल्लम किआ। भ्रष्टाचारी हराया
 आवश्यक है कि निहिल।









छद्म तत्वों की ऊंचाई कैसे बदलें?


 टेम्पोरिबस वेल डोलोरे नाम डोलोरेम सिमिलिक वोलुप्टाटम। अलीकम, डोलर एट! टेम्पोर मोलिटिया वोलुप्टाटिबस
 डुसीमस एक्सेचुरी डोलोरिबस एलिकम इप्सम वेल, एक्यूसेंटियम क्वो निमो एक्सपीडिटा एसएसई ईओएस लिबेरो इंसिडंट
 रेप्रेहेंडरिट फेसरे पूर्व एचआईसी आईपीएसए ओडिट इन! शाम।

सामान्य सीएसएस

मूल सीएसएस को शरीर पर लागू करें।

तन {
 रंग: #502c2c;
 पृष्ठभूमि: #f1edec;
 गद्दी: 1.2rem;
 फ़ॉन्ट-फ़ैमिली: 'सेगो यूआई', ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़;
 अधिकतम-चौड़ाई: 45rem;
 मार्जिन: 0 ऑटो;
 फ़ॉन्ट-आकार: 1.2rem;
}

अकॉर्डियन को स्टाइल करना

सबसे पहले, इनपुट को संशोधित करके चेकबॉक्स छिपाएं।

/* चेकबॉक्स या रेडियो बटन छिपाना*/
इनपुट {
 स्थिति: निरपेक्ष;
 अस्पष्टता: 0;
 जेड-इंडेक्स: -1;
}

अब, अकॉर्डियन को स्टाइल करें। आप एक जोड़ सकते हैं::उपरांत के लिए छद्म तत्व + संकेत। आप एक का उल्लेख कर सकते हैं चरित्र इकाई संदर्भ चार्ट और किसी का उपयोग करें इकाई रूपांतरण कैलक्यूलेटर संख्यात्मक मान का CSS मान ज्ञात करने के लिए। यहाँ, CSS Value of + है \002बी.

/* अकॉर्डियन शैलियाँ */
।सामान्य प्रश्न {
 रंग: #ffe3e3;
 मार्जिन-नीचे: 3rem;
}
.FAQ-लेबल {
 फ़ॉन्ट-आकार: 1.5rem;
 प्रदर्शन: फ्लेक्स;
 संरेखित-आइटम: केंद्र;
 औचित्य-सामग्री: अंतरिक्ष-बीच;
 गद्दी: 1em;
 पृष्ठभूमि: #b61818;
 फोंट की मोटाई: बोल्ड;
 कर्सर: सूचक;
 उपयोगकर्ता-चयन: कोई नहीं;
}
.faq-लेबल:: के बाद {
 सामग्री: '\002बी';
 गद्दी: 0.51rem;
 ट्रांसफॉर्म: स्केल (1.8);
 पाठ-संरेखण: केंद्र;
 संक्रमण: सभी 0.35s;
}
.एफएक्यू-सामग्री {
 अधिकतम-ऊंचाई: 0;
 पैडिंग: 0 1em;
 रंग: #2c3e50;
 पृष्ठभूमि: सफेद;
 संक्रमण: सभी 0.35s;
 कुछ भी डिस्प्ले मत करो;
}

अब, अकॉर्डियन का उपयोग करके कार्यक्षमता जोड़ें आसन्न और विशेषता चयनकर्ता. यहां, \2013 के लिए सीएसएस मूल्य है –, सांख्यिक मान का प्रतिनिधित्व –.

इनपुट: चेक किया गया + .faq- लेबल {
 पृष्ठभूमि: #8f1414;
}
इनपुट: चेक किया गया + .faq- लेबल:: के बाद {
 सामग्री: '\2013';
 ट्रांसफॉर्म: स्केल (1.5);
}
इनपुट: चेक किया गया ~ .faq-content {
 अधिकतम ऊंचाई: 100vh;
 गद्दी: 1em;
 प्रदर्शन क्षेत्र;
 संक्रमण: सभी 0.35s;
}

आउटपुट:

रेडियो बटन विधि का उपयोग करना

रेडियो बटन विधि में एक इनपुट प्रकार सेट है रेडियो. जब भी उपयोगकर्ता किसी टैब पर क्लिक करता है, तो उस टैब से संबंधित हिडन रेडियो बटन खुल जाता है। जब आप अगले टैब पर क्लिक करते हैं, तो पिछला टैब तुरंत बंद हो जाता है। आप रेडियो बटन विधि का उपयोग करके एक समय में केवल एक टैब खोल सकते हैं।

एचटीएमएल

कस्टम सीएसएस ओनली अकॉर्डियन (अक्सर पूछे जाने वाले प्रश्न)

रेडियो बटन विधि का उपयोग करना






रेडियो बटन विधि का उपयोग करके अकॉर्डियन कैसे बनाएं?


 लोरेम, इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus भ्रष्टाचार मुक्त hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









केवल CSS का उपयोग करके एक कस्टम अकॉर्डियन कैसे बनाएं?


 एपेरियम डोलोरेस ऑटम ओडिट, निहिल ईयूस सिट मिनिमा क्वास लॉडेंटियम एस्परनाटुर पॉसिमस रीसीएंडिस विटे ड्यूसीमस लेबर क्विडेम वेलिट वेल टेम्पोरीबस! इलो सन प्लेसैट ऑफिसिस, टियूर मैग्नम। एड सिट पेरफेरेंडिस ड्यूसीमस डिक्टा, एस्ट एस्परनेचर एस्परियोरेस, क्वैसी बीटा क्वास डेलेनिटी।









अकॉर्डियन स्टाइल का क्या मतलब है?


 लॉडेंटियम क्विबसडैम लेबरिओसम एचआईसी ओमनीस क्वास उल्लम कमोडी रेम। आर्किटेक्टो यूट लेबरम ईक कम पोरो डोलोरेमक्यू हिक क्यूपिडिटेट टेम्पोरा टेम्पोरीबस डुसीमस डोलोरेस मैग्नम क्विडेम, फैसिलिस सैपिएंट ऑफिसिस वॉलुप्टस? वेल, नहीं!









सभी बंद करें ×

सीएसएस

चेकबॉक्स विधि के उपरोक्त सीएसएस को कॉपी करें क्योंकि दोनों विधियां केवल संरचनात्मक दृष्टिकोण से भिन्न हैं। आप देख सकते हैं कि एक टैब हर समय खुला रहता है। ऐसा इसलिए होता है क्योंकि आप चेकबॉक्स जैसे रेडियो बटन को अचिह्नित नहीं कर सकते। इसे पूरा करने के लिए, नीचे दिए गए CSS कोड को बिना किसी विवरण के "सभी को बंद करें" रेडियो बटन में जोड़ें।

/*सब बंद करना*/
.FAQ-लेबल {
 स्थिति: रिश्तेदार;
}
.FAQ-बंद {
 प्रदर्शन: इनलाइन-ब्लॉक;
 गद्दी: 1rem;
 फ़ॉन्ट-आकार: 1rem;
 पृष्ठभूमि: #b61818;
 कर्सर: सूचक;
 स्थिति: निरपेक्ष;
 बाएं: 64rem;
}

आउटपुट:

प्रयोग करते रहें और एनिमेशन जोड़ें

अकॉर्डियन के पीछे एक सरल तर्क है: जब आप किसी मेनू पर क्लिक करते हैं, तो उसकी छिपी हुई सामग्री दिखाई देगी। चूंकि अब आप जानते हैं कि एक अकॉर्डियन कैसे बनाया जाता है, इसलिए अपने सीखने को लागू करने और प्रयोग करने का समय आ गया है। आप डिज़ाइन को बढ़ाने के लिए क्षैतिज समझौते बना सकते हैं, खासकर छवियों को प्रदर्शित करते समय। कीफ़्रेम एनिमेशन का उपयोग करके संक्रमण प्रभाव को समायोजित करके कोड के साथ प्रयोग करें।

नैंसी मौर्य (16 लेख प्रकाशित)

नैंसी अत्यधिक प्रतिक्रियाशील वेबसाइटों और वेब प्रतियों के साथ कुशल सामग्री रणनीति बनाने में माहिर हैं। वह एक स्वतंत्र तकनीकी लेखिका हैं, जो ट्रेंडिंग तकनीकों पर पैनी नज़र रखती हैं।

नैंसी मौर्य की और फ़िल्में या टीवी शो