Accordion with text button innerHTML

Question

I have an accordion that basically works except for one detail. Instead of the usual arrow, which shows whether the accordion is closed or not, I have the text - "Open". I use innerHTML in Pure JS to change it to "Close". When I click on the button on the item that I want to close, everything works, but when I click on another item, I need the rest of the items to change the text to "Open", but this does not happen. My code is below and this is the link to the codepen

 document.addEventListener("DOMContentLoaded", function(event) {
    
        const accordionItems = document.querySelectorAll('.acc__item');
    
        accordionItems.forEach((acc) => {
            const btns = acc.querySelectorAll('.acc__button')
    
            btns.forEach(btn => {
    
                btn.addEventListener("click", () => {
    
                    if (acc.classList.contains('open') && btn.innerHTML !== "Open") {
                        btn.innerHTML = "Open";
                    } else {
                        btn.innerHTML = "Close";
                    }
    
                    accordionItems.forEach((item) => {
                    if (item !== acc) {
                        item.classList.remove("open");
                    }
                    });
    
                    acc.classList.toggle("open");
    
    
                });
    
            });
    
        });  
    });

    .acc__item {
      border: 1px solid navy;
    }
    .acc__title {
      display: flex;
      justify-content: space-between;
    }
    
    .acc__content {
      display: none;
    }
    
    .acc__button {
      background-color: none;
      width: 30%
    }
    
    .open .acc__content {
       display: block;
    }

    <div class="acc">
       <div class="acc__item">
         <div class="acc__title">
            <h4>Title 1</h4>
            <button class="acc__button">Open</button>
          </div>
         <div class="acc__content">
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
         </div>
       </div>
       <div class="acc__item">
         <div class="acc__title">
            <h4>Title 1</h4>
            <button class="acc__button">Open</button>
          </div>
         <div class="acc__content">
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
         </div>
       </div>
       <div class="acc__item">
         <div class="acc__title">
            <h4>Title 1</h4>
            <button class="acc__button">Open</button>
          </div>
         <div class="acc__content">
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
         </div>
       </div>
       <div class="acc__item">
         <div class="acc__title">
            <h4>Title 1</h4>
            <button class="acc__button">Open</button>
          </div>
         <div class="acc__content">
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
         </div>
       </div>
 




   

Answer 1

Try to get the button inside the div and change the text like this

item.getElementsByTagName("button")[0].innerHTML = "Open";

Demo below:

document.addEventListener("DOMContentLoaded", function(event) {
debugger;
    const accordionItems = document.querySelectorAll('.acc__item');

    accordionItems.forEach((acc) => {
debugger;
        const btns = acc.querySelectorAll('.acc__button')

        btns.forEach(btn => {

            btn.addEventListener("click", () => {
debugger;

                if (acc.classList.contains('open') && btn.innerHTML !== "Open") {
                    btn.innerHTML = "Open";
                } else {
                    btn.innerHTML = "Close";
                }

                accordionItems.forEach((item) => {
                if (item !== acc) {
                
debugger;
                    item.classList.remove("open");
                    //getting the button by tag name and updating it
                    item.getElementsByTagName("button")[0].innerHTML = "Open";
                }
                });

                acc.classList.toggle("open");


            });

        });

    });

});

.acc__item {
  border: 1px solid navy;
}
.acc__title {
  display: flex;
  justify-content: space-between;
}

.acc__content {
  display: none;
}

.acc__button {
  background-color: none;
  width: 30%
}

.open .acc__content {
   display: block;
}

 <div class="acc">
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>