'Toggle buttons issue

If I click on search icon it will open back button and search bar. Again I click on the back button it will open search icon

I tried with inner html.

If I click on search icon I used innerhtml to display back button and search bar. But if I click on back button how to render search icon?

container.insertAdjacentHTML('afterbegin', `
  <header>
    <div id="chat-icon">
      <div class="search"><i class="fas fa-search"></i></div>
      <div id="chat"><i class="far fa-edit"></i></div>
    </div>
  </header>
  <div id="group-list"></div>`);

container.querySelector('header #chat-icon #chat').addEventListener('click', async() => {
  this.chat.container.querySelector('.groups').remove();
  this.chat.container.insertAdjacentElement('afterbegin', this.createGroup.container);
  await this.createGroup.load();
});

container.querySelector('header .search').addEventListener('click', async() => {
  this.chat.container.querySelector('header .search').innerHTML = `
    <div class="heading">
      <div id="back-button"><i class="fa fa-arrow-left"></i></div>
      <div id="search-bar"></div>   
    </div>`
})
javascripthtmljquerynode.js


Solution 1:[1]

Instead of .remove() and .load(), you can use .hide to hide the searchbar and .show() to show it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pietro Teggi

Related Questions