JavaScript से एलिमेंट छुपाएं/दिखाएं टॉगल करें

किसी एलिमेंट की विजिबिलिटी को टॉगल करना (दिखाना/छुपाना) JavaScript के सबसे आम कार्यों में से एक है। इसे style.display, style.visibility, या hidden एट्रिब्यूट के साथ किया जा सकता है।

उदाहरण (display टॉगल)

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    button { padding: 12px 24px; border: none; background: #3333c0; color: white; font-size: 18px; border-radius: 6px; cursor: pointer; } 
    .div-visible { width: 100%; padding: 50px 0; text-align: center; background: #d2e6ad; margin-top: 20px; font-size: 18px; font-weight: 500; border-radius: 8px; transition: all 0.3s; } 
</style> </head> <body> 
<h1>एलिमेंट छुपाएं/दिखाएं टॉगल</h1> 
<button class="toggleDisplay">DIV छुपाएं</button> 
<h2>ऊपर दिए गए बटन पर क्लिक करके नीचे का DIV छुपाएं/दिखाएं</h2> 
<div class="div-visible">यह एक DIV एलिमेंट है</div> 
<script> 
    document.querySelector(".toggleDisplay").addEventListener("click", toggleDivDisplay); 
    
    function toggleDivDisplay() { 
        const x = document.querySelector(".div-visible"); 
        const btn = document.querySelector(".toggleDisplay"); 
        
        if (x.style.display === "none") { 
            x.style.display = "block"; 
            btn.textContent = "DIV छुपाएं"; 
        } else { 
            x.style.display = "none"; 
            btn.textContent = "DIV दिखाएं"; 
        } 
    } 
</script> </body> </html>

आउटपुट

प्रारंभिक: हरा DIV दिखाई देता है, बटन "DIV छुपाएं" दिखाता है

क्लिक 1: DIV गायब (layout से हट जाता है), बटन "DIV दिखाएं"

क्लिक 2: DIV फिर से दिखाई देता है

तीन तरीके तुलना

hidden एट्रिब्यूट तरीका (अनुशंसित)

function toggleHidden(el) {
    if (el.hidden) {
        el.hidden = false; // या el.removeAttribute("hidden")
    } else {
        el.hidden = true;
    }
}

// या टॉगल
el.toggleAttribute("hidden"); // मॉडर्न ब्राउज़र्स में

एनिमेशन के साथ (CSS ट्रांजिशन)

// CSS
.fade-toggle {
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}
.fade-toggle.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

// JS
element.classList.toggle("hidden");

aria-hidden के साथ एक्सेसिबिलिटी

function toggleWithAria(el) {
    const isHidden = el.hidden;
    el.hidden = !isHidden;
    el.setAttribute("aria-hidden", !isHidden);
}