JavaScript: click on element by class not working

Question

I have simple JavaScript which may extend the element with class SLUZBY with an element with class EXTENDED-SLUZBY.

I need to have a working script on each element with class SLUZBY which will expand when the user clicks on it.

Is there any option on how I can make it as I wrote above?

var sluzba = document.getElementsByClassName('sluzba')
var extendedsluzba = document.getElementsByClassName('sluzba-extended')

sluzba.addEventListener('click', () => {
    extendedsluzba.classList.toggle('active')
})

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

Answer 1

You can use below code its working and tested.

var sluzba = document.querySelectorAll('.sluzba')
var extendedsluzba = document.querySelectorAll('.extended-sluzba')

sluzba.forEach((e, i) => {
  e.addEventListener('click', () => {
      extendedsluzba[i].classList.toggle('active')
  })
})
  

.extended-sluzba {
display: none;
}

.extended-sluzba.active {
display: block;
}

<div class="sluzba">
  Sluzba01
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba02
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba03
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

<div class="sluzba">
  Sluzba04
   <div class="extended-sluzba">
    EXTENDED PART
   </div>
</div>

Answer 2

var sluzba = document.getElementsByClassName('sluzba') returns array of elements. Loop will do the trick:

var sluzba = document.getElementsByClassName('sluzba');
for (let i = 0; i < sluzba.length; i++) {
   sluzba[i].addEventListener('click', () => {
     extendedsluzba.classList.toggle('active');
   });
}