removing a class when a search box is clicked

Question

TLDR; The functionality I'm trying to create in this code example is upon clicking a box (collapsible has active class), and then you click on the search box, the active class is removed closing the collapsible. Currently, the remove class is not working. Any idea why?

In more detail:

I have a list of collapsible blocks get an active class when they are clicked. You can search a search box to filter out which block you want to be displayed, and thus click on it to display more content. I have realized that when you go back to search and didn't 'unclick' a box (to close the collapsible) the box is still active (which makes perfect sense).

I had an idea that upon search box focus, I would loop through all the collapsible and remove the active class itself (in turn, closing the collapsible).

I've gotten to the point where I can find which collapsible is active, but I cannot remove the active class.

Is this because the box was initially clicked to add the class and has to be physically clicked once again to remove it?

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

function searchClick() {
  var searchTable;
  searchTable = document.getElementById("search-table");
  faqButtons = searchTable.getElementsByTagName("button");
  for (i = 0; i < faqButtons.length; i++) {
    if (faqButtons[i].classList.contains("active")) {
      console.log('THIS ONE: ', faqButtons[i]);
      faqButtons[i].classList.remove("active");
    }
  }
}

.collapsible {
  display: flex;
  justify-content: space-between;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.collapsible span {
  padding-left: 5px;
  padding-right: 5px;
}



.collapsible .active,
.collapsible:hover {
  background-color: #333;
  color: white;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.content p {
  margin-top: 10px;
}

<div class="search-faq">
  <input autocomplete="off" type="text" id="search-faq" placeholder="Search for FAQ" onfocus="searchClick()" />
</div>

<div id="search-table" class="superHidden">
  <div id="wolfandgrizzly-FAQ-search">
    <h1>A to B sales</h1>
    <button class="collapsible"><span>What are our shipping policies?</span></button>
    <div class="content">
      <p>
        They are crazy cool.
      </p>
    </div>
    <button class="collapsible"><span>Are you making more products?</span></button>
    <div class="content">
      <p>
        We'll sell you more very soon
      </p>
    </div>
  </div>

Answer 1

Here's an approach that uses as little JavaScript as possible. If JavaScript is disabled, the only thing that will break is the search box. Sections will still open and close as expected when clicked.

The accordion stores its state in checkboxes, one in each section. Each section's title is a label element which toggles that section's checkbox when clicked. The sections are expanded and collapsed using CSS :checked selectors.

var sections = [].slice.call(document.querySelectorAll(".accordion li")),
  searchAccordion = function() {
    var value = document.getElementById("search").value.toLowerCase();
    sections.map(function(section) {
      var content = section.textContent.toLowerCase();
      section.querySelector("input").checked = content.includes(value);
    });
  };

body {
  font-family: sans-serif;
}

.accordion {
  padding-left: 0;
  margin: -1rem;
}

.accordion li {
  list-style-type: none;
}

.accordion input {
  display: none;
}

.accordion label {
  background-color: #eee;
  transition: background-color 100ms;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 1rem;
  display: block;
}

.accordion label:hover {
  background-color: #444;
  color: white;
}

.accordion .content {
  padding: 1rem;
  display: none;
}

.accordion input:checked ~ .content { 
  display: block; 
}

<input id="search" onKeyup="searchAccordion()" type="text" placeholder="Search for FAQ" autocomplete="off">

<h1>A to B sales</h1>

<ul class="accordion">
  <li>
    <input type="checkbox" id="section1">
    <label for="section1">What are our shipping policies?</label>
    <div class="content">They are crazy cool.</div>
  </li>
  <li>
    <input type="checkbox" id="section2">
    <label for="section2">Are you making more products?</label>
    <div class="content">We'll sell you more very soon</div>
  </li>
</ul>

Answer 2

I don't see where you are getting that the active class is not being removed. It doesn't appear that there is a problem with that. I think the problem is that you are showing the answers via maxHeight setting, but you aren't resetting it when you click the search box. I've updated it in this snippet, but essentially it boiled down to adding the following in your loop:

var content = faqButtons[i].nextElementSibling
content.style.maxHeight = null

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

function searchClick() {
  var searchTable;
  searchTable = document.getElementById("search-table");
  faqButtons = searchTable.getElementsByTagName("button");
  for (i = 0; i < faqButtons.length; i++) {
    if (faqButtons[i].classList.contains("active")) {
      console.log('THIS ONE: ', faqButtons[i]);
      faqButtons[i].classList.remove("active");
    }
    var content = faqButtons[i].nextElementSibling
    content.style.maxHeight = null
  }
}

.collapsible {
  display: flex;
  justify-content: space-between;
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.collapsible span {
  padding-left: 5px;
  padding-right: 5px;
}



.collapsible .active,
.collapsible:hover {
  background-color: #333;
  color: white;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.content p {
  margin-top: 10px;
}

<div class="search-faq">
  <input autocomplete="off" type="text" id="search-faq" placeholder="Search for FAQ" onfocus="searchClick()" />
</div>

<div id="search-table" class="superHidden">
  <div id="wolfandgrizzly-FAQ-search">
    <h1>A to B sales</h1>
    <button class="collapsible"><span>What are our shipping policies?</span></button>
    <div class="content">
      <p>
        They are crazy cool.
      </p>
    </div>
    <button class="collapsible"><span>Are you making more products?</span></button>
    <div class="content">
      <p>
        We'll sell you more very soon
      </p>
    </div>
  </div>