JavaScript से टेक्स्ट टॉगल करें

JavaScript का उपयोग करके किसी एलिमेंट का टेक्स्ट कंटेंट दो स्थितियों के बीच टॉगल करना एक सामान्य UI पैटर्न है (जैसे "अधिक दिखाएं/कम दिखाएं", "चालू/बंद")।

उदाहरण

<!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; } 
    .textDiv { font-size: 20px; background: #c7e49d; width: 100%; padding: 15px; font-weight: bold; border-radius: 8px; transition: all 0.3s; } 
    .toggleBtn { padding: 15px 30px; border: none; background: #6a2999; color: white; font-size: 18px; border-radius: 6px; cursor: pointer; transition: transform 0.2s; } 
    .toggleBtn:hover { transform: scale(1.05); } 
    .toggleBtn:active { transform: scale(0.98); } 
</style> </head> <body> 
<h1>टेक्स्ट टॉगल उदाहरण</h1> 
<button class="toggleBtn">क्लिक करें</button> 
<h2>ऊपर दिए गए बटन पर क्लिक करके नीचे का टेक्स्ट टॉगल करें</h2> 
<div class="textDiv">पुराना टेक्स्ट</div> 
<script> 
    document.querySelector(".toggleBtn").addEventListener("click", toggleText); 
    
    function toggleText() { 
        const x = document.querySelector(".textDiv"); 
        if (x.textContent === "पुराना टेक्स्ट") { 
            x.textContent = "नया टेक्स्ट"; 
        } else { 
            x.textContent = "पुराना टेक्स्ट"; 
        } 
    } 
</script> </body> </html>

आउटपुट

प्रारंभिक: "पुराना टेक्स्ट" हरे बैकग्राउंड में

क्लिक 1: "नया टेक्स्ट"

क्लिक 2: "पुराना टेक्स्ट"

बेहतर पैटर्न्स

1. डेटा एट्रिब्यूट में स्टेट स्टोर करें

<div class="textDiv" data-text-alt="नया टेक्स्ट">पुराना टेक्स्ट</div>

function toggleText() {
    const el = document.querySelector(".textDiv");
    const current = el.textContent;
    el.textContent = el.dataset.textAlt;
    el.dataset.textAlt = current;
}

2. CSS-ओनली टॉगल (चेकबॉक्स हैक)

<input type="checkbox" id="toggle" hidden>
<label for="toggle">टॉगल</label>
<div class="textDiv">
    <span class="text-old">पुराना</span>
    <span class="text-new">नया</span>
</div>

3. एरो फंक्शन शॉर्टहैंड

const toggleText = () => {
    const el = document.querySelector(".textDiv");
    el.textContent = el.textContent === "पुराना टेक्स्ट" ? "नया टेक्स्ट" : "पुराना टेक्स्ट";
};

4. एनिमेशन के साथ

function toggleText() {
    const el = document.querySelector(".textDiv");
    el.style.opacity = 0;
    setTimeout(() => {
        el.textContent = el.textContent === "पुराना टेक्स्ट" ? "नया टेक्स्ट" : "पुराना टेक्स्ट";
        el.style.opacity = 1;
    }, 150);
}
// CSS: .textDiv { transition: opacity 0.15s; }