My code is for FAQ page:

function initActions() {
  let counter = 0;

  // Function to update button label based on counter
  const updateButtonLabel = () => {
    const toggleButton = document.querySelector('.js_faq_toggle_all');
    if (counter === 0 || counter < 4) {
      toggleButton.textContent = 'Show All';
      toggleButton.removeEventListener('click', toggleHideAll);
      toggleButton.addEventListener('click', toggleShowAll);
    } else {
      toggleButton.textContent = 'Hide All';
      toggleButton.removeEventListener('click', toggleShowAll);
      toggleButton.addEventListener('click', toggleHideAll);
    }
  };

  // Function to count visible items
  const updateCounter = () => {
    counter = document.querySelectorAll('.accordion-collapse.show').length;
    updateButtonLabel();
  };

  // Function to show all items
  const toggleShowAll = () => {
    const collapseElements = document.querySelectorAll('#faq .collapse');
    collapseElements.forEach(collapseEl => {
      const collapse = new bootstrap.Collapse(collapseEl, {toggle: false});
      collapse.show();
    });
    counter = collapseElements.length;
    updateButtonLabel();
  };

  // Function to hide all items
const toggleHideAll = () => {
  const collapseElements = document.querySelectorAll('#faq .collapse');
  collapseElements.forEach(collapseEl => {
    const collapse = new bootstrap.Collapse(collapseEl, {toggle: false});
    collapse.hide();
    collapseEl.removeEventListener('shown.bs.collapse', updateCounter);
    collapseEl.removeEventListener('hidden.bs.collapse', updateCounter);
  });
  counter = 0;
  updateButtonLabel();
};
  // Add event listeners to accordion buttons
  document.querySelectorAll('.accordion-button').forEach(button => {
    button.addEventListener('click', () => {
      const target = document.querySelector(button.getAttribute('data-bs-target'));
      target.addEventListener('shown.bs.collapse', updateCounter);
      target.addEventListener('hidden.bs.collapse', updateCounter);
    });
  });

  // Initial button setup
  const toggleButton = document.querySelector('.js_faq_toggle_all');
  toggleButton.addEventListener('click', toggleShowAll);
  updateButtonLabel();

  // Add event listener to search button
const searchButton = document.getElementById('searchButton');
const cancelSearchButton = document.getElementById('cancelSearchButton');

searchButton.addEventListener('click', () => {
  const searchText = document.getElementById('searchInput').value.toLowerCase();
  const items = document.querySelectorAll('.accordion-item');
  items.forEach(item => {
    const question = item.querySelector('.accordion-button').textContent.toLowerCase();
    const answer = item.querySelector('.accordion-body').textContent.toLowerCase();
    if (question.includes(searchText) || answer.includes(searchText)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
  cancelSearchButton.style.display = 'inline-block';
});

// Add event listener to cancel search button
cancelSearchButton.addEventListener('click', () => {
  const items = document.querySelectorAll('.accordion-item');
  items.forEach(item => {
    item.style.display = '';
  });
  document.getElementById('searchInput').value = '';
  cancelSearchButton.style.display = 'none';
});

// Add hover effect to cancel search button
cancelSearchButton.addEventListener('mouseover', () => {
  cancelSearchButton.style.backgroundColor = 'darkred';
});

cancelSearchButton.addEventListener('mouseout', () => {
  cancelSearchButton.style.backgroundColor = 'red';
});
}

// Use DOMContentLoaded event for better performance
document.addEventListener("DOMContentLoaded", initActions);

The problem is when I search for texts within button, then the 1st toggle change is bugged(causing wrongly added function and name for hide or show), but this case will be easy to solve.

But the real problem is, how can I write this code a bit better + how to add another condition and that’s language settings of client, so button name will have correct language translation?

I am a begginer in JS, so I have to ask. 😀 :/

Correct toggle button name changes + correctly attached function + adding language translation.