एलिमेंट में क्लिक पर एक अनुभाग कैसे दिखाएं या छिपाएं

कुंजी तकिए

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

एलिमेंट में क्लिक पर एक सेक्शन दिखाने या छिपाने के लिए, क्लिक करने पर खुलने वाले किसी चीज़ के अंदर सेक्शन डालें अकॉर्डियन विजेट बिना किसी अतिरिक्त प्लगइन के ऐसा करता है एक कंटेंट टॉगल आपको एक शो और हाइड स्विच देता है स्क्रिप्ट की कुछ पंक्तियों वाला एक बटन पेज पर किसी भी कंटेनर को प्रकट कर सकता है एलिमेंट में क्लिक” सेटिंग पर एक भी “शो नहीं है, इसलिए इन तीनों में से एक मार्ग है।

नीचे दी गई प्रत्येक विधि एलिमेंटर 4.3 पर बनाई और परीक्षण की गई थी। ट्रिगर कैसा दिखना चाहिए इसके आधार पर चुनें: एक शीर्षक बार, एक स्विच या एक बटन।

कौन सा तरीका आपके पेज पर फिट बैठता है

सभी तीन तरीके एक क्लिक तक एक अनुभाग छिपाते हैं वे आगंतुक क्लिक करता है और उन्हें कितना सेटअप चाहिए, इसमें भिन्न होते हैं।

विधि 1: अकॉर्डियन विजेट

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

1. एलिमेंटर के साथ पेज संपादित करें और खींचें अकॉर्डियन विजेट जहां छिपा अनुभाग होना चाहिए।
2. उन वस्तुओं को हटा दें जिनकी आपको आवश्यकता नहीं है एक छिपे हुए अनुभाग के लिए, एक आइटम रखें।
3. शीर्षक टाइप करें विज़िटर क्लिक करेंगे, जैसे डिलीवरी विवरण दिखाएं।
4. आइटम के अंदर क्लिक करें और अपनी सामग्री जोड़ें: पाठ, चित्र, एक फॉर्म या संपूर्ण कंटेनर लेआउट।
5. खुला इंटरैक्शन और सेट डिफ़ॉल्ट स्थिति को सब ढह गए.

इस विधि की सीमा देखो है ट्रिगर हमेशा सामग्री के ऊपर सीधे एक शीर्षक पट्टी है यदि आपको एक स्टाइल बटन की आवश्यकता है, या पृष्ठ पर कहीं और ट्रिगर, विधि ३ का उपयोग करें अधिक शीर्षक शैलियों के लिए, द उन्नत अकॉर्डियन विजेट एक विकल्प है।

विधि २: एक खाली विकल्प के साथ एक सामग्री टॉगल

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

इन चरणों का उपयोग करें सामग्री टॉगल करें मास्टर एडॉन्स प्रो से हमने एलिमेंटर ४.३ पर खाली विकल्प का परीक्षण किया और यह कोई अंतर या प्लेसहोल्डर नहीं छोड़ता है।

1. खींचना सामग्री टॉगल करें पृष्ठ पर।
2. में तत्वों सूची, पहले आइटम को लेबल करें विवरण छिपाएं और नमूना पाठ हटाएं ताकि इसकी सामग्री खाली हो।
3. दूसरे आइटम को लेबल करें विवरण दिखाएं संपादक में सामग्री लिखें, या सेट करें प्रकार टेम्पलेट करने के लिए और पूर्ण लेआउट के लिए सहेजा गया टेम्पलेट चुनें।
4. खुला टॉगल सेटिंग्स और छोड़ सक्रिय सूचकांक १ पर, इसलिए पृष्ठ छिपे हुए अनुभाग के साथ लोड होता है।
5. सेट स्थिति पहले करने के लिए यदि स्विच अनुभाग के ऊपर बैठना चाहिए, या बाद में इसे नीचे रखना चाहिए।

स्विच राज्य को स्पष्ट करता है, जो पोषण तथ्यों, तकनीकी चश्मा या शर्तों जैसे वैकल्पिक विवरणों के अनुरूप है इसे दूसरे तरीके से फ्लिप करने के लिए, अनुभाग के साथ पहले दिखाई दे रहा है, सक्रिय सूचकांक को २ पर सेट करें।

दो वर्गों के बीच स्विचिंग? द सामग्री विजेट पृष्ठ टॉगल करें बिलिंग स्विच, स्पेक टेबल और आठ और लाइव डेमो हैं।

विधि ३: एक बटन और एक छोटी स्क्रिप्ट

जब ट्रिगर एक सामान्य बटन होना चाहिए, या जब बटन और अनुभाग अलग-अलग स्थानों पर हों तो एक स्क्रिप्ट का उपयोग करें आप बटन में एक सीएसएस क्लास जोड़ते हैं, अनुभाग में एक, और एक एचटीएमएल विजेट में एक छोटा स्निपेट पेस्ट करते हैं।

1. एक जोड़ें बटन विजेट। में उन्नत > सीएसएस कक्षाएं, प्रकार show-hide-buttonबटन के लिंक फ़ील्ड खाली छोड़ दें।
2. उस कंटेनर का चयन करें जिसे आप छिपाना चाहते हैं में उन्नत > सीएसएस कक्षाएं, प्रकार show-hide-target.
3. खींचना एचटीएमएल पेज पर कहीं भी विजेट करें और नीचे कोड पेस्ट करें।
4. पृष्ठ को अपडेट करें और सामने के छोर पर इसका परीक्षण करें।

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

पहला शैली नियम कंटेनर छुपाता है दूसरा इसे दिखाता है एक बार स्क्रिप्ट जोड़ता है is-open कक्षा तीसरा कंटेनर को एलिमेंट संपादक के अंदर दिखाई देता रहता है, इसलिए आप अभी भी इसे संपादित कर सकते हैं बटन पर प्रत्येक क्लिक कक्षा को जोड़ता है या हटाता है।

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

यदि अनुभाग पृष्ठ पर खुलना चाहिए, तो पॉपअप का उपयोग करें देखें एलिमेंटर में पॉपअप कैसे जोड़ें.

क्या काम नहीं करता है: प्रदर्शन की स्थिति और उत्तरदायी सेटिंग्स

दो एलिमेंटर की विशेषताएं ध्वनि की तरह हैं जैसे उन्हें ऐसा करना चाहिए और नहीं दोनों सामग्री छिपाते हैं, लेकिन न तो एक क्लिक पर प्रतिक्रिया करता है।

• उत्तरदायी सेटिंग्स उन्नत > उत्तरदायी डेस्कटॉप पर छिपाएं, टैबलेट पर छिपाएं और मोबाइल पर छिपाएं वे स्क्रीन आकार द्वारा एक तत्व को छिपाते हैं, हर समय।
• प्रदर्शन की शर्तें। एलिमेंट की प्रदर्शन स्थितियाँ नियम द्वारा एक तत्व दिखाएं या छिपाएं, जैसे लॉगिन स्थिति, उपयोगकर्ता भूमिका, दिनांक या ब्राउज़र निर्णय तब किया जाता है जब पृष्ठ लोड होता है।

वे सही उपकरण हैं जब साइट को यह तय करना चाहिए कि एक आगंतुक क्या देखता है हम उन्हें कवर करते हैं एलिमेंट डिस्प्ले की स्थिति, और द प्रदर्शन शर्तें विस्तार पृष्ठ हर नियम को सूचीबद्ध करता है जो इसका समर्थन करता है जब आगंतुक को निर्णय लेना चाहिए, तो ऊपर तीन क्लिक विधियों में से एक का उपयोग करें।

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

अंतिम विचार

एलिमेंटर में क्लिक पर एक अनुभाग दिखाने या छिपाने के तीन भरोसेमंद तरीके हैं जब एक शीर्षक बार ठीक है, एक खाली विकल्प के साथ एक सामग्री टॉगल करें जब आप एक दृश्यमान स्विच चाहते हैं, और एक छोटी स्क्रिप्ट के साथ एक बटन जब ट्रिगर को कहीं और बैठना पड़ता है।

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

संबंधित पढ़ने

• एलिमेंटर प्रदर्शन की स्थिति: नियम द्वारा सामग्री दिखाएं और छिपाएं
• एलिमेंटर में पॉपअप कैसे जोड़ें
• एलिमेंटर स्क्रॉल प्रभाव
• एलिमेंटर में टॉगल बटन कैसे बनाएं (३ तरीके)
• एलिमेंटर टॉगल बनाम अकॉर्डियन बनाम टैब बनाम कंटेंट स्विचर