जावास्क्रिप्ट में कई एलिमेंट्स के साथ टॉगल बटन

अब मान लीजिए कि हमारे पास कई पैराग्राफ हैं और प्रत्येक का अपना छिपाने/दिखाने के लिए एक बटन है:

html<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

आइए ऐसा बनाएं कि बटन पर क्लिक करने से संबंधित पैराग्राफ छिप जाए या दिखाई दे।

इसके लिए हमें किसी तरह बटन को अपने पैराग्राफ से लिंक करना होगा। इसके कई तरीके हैं।

पहला तरीका

आइए बटन और पैराग्राफ को निम्नलिखित तरीके से लिंक करें:

html<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

अब किसी भी बटन पर क्लिक करने पर हम उसके data-elem एट्रिब्यूट की वैल्यू पढ़ेंगे और उस id वाला पैराग्राफ ढूंढेंगे। उसे ही टॉगल करेंगे। आइए वर्णित कोड को लागू करें:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

दूसरा तरीका

id और data-एट्रिब्यूट्स सेट करना बहुत सुविधाजनक नहीं है। आइए ऐसा करें कि कनेक्शन क्रमिक स्थिति के आधार पर हो: पहला बटन पहला पैराग्राफ छिपाएगा/दिखाएगा, दूसरा बटन - दूसरा और इसी तरह आगे भी।

आइए वर्णित कोड को लागू करें:

javascriptlet buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    elems[i].classList.toggle('hidden');
  });
}

तीसरा तरीका

जैसा कि देखा जा सकता है, बटन से जुड़ा पैराग्राफ उसका बायाँ पड़ोसी है। इस कनेक्शन के रूप में इसका उपयोग किया जा सकता है:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    this.previousElementSibling.classList.toggle('hidden');
  });
}