JSFiddle - React, Tailwind, and code Playground

by idonthaveagirlfriend

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" placeholder="Search Keyword Info" class="input-search" id="search-qa">

<div class="container">
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Where is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Qweeee not a description.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> What is a Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Lorem Ips</p>
        </div>
      </div>
    </div>
  </div>
  <div class="collapse">
    <div class="collapse__head">
      <label class="qa-question searchable-content" data-category="location"> Who is Test</label>
    </div>
    <div class="collapse__body">
      <div class="collapse__inner">
        <div class="qa-answer" data-category="location">
          <p>Dolor it</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.collapse {
    border: 1px solid currentColor;
    margin: 10px 0;
    -webkit-transition: background 0.2s ease-in;
    -moz-transition: background 0.2s ease-in;
    -o-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
}

.collapse__head {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    cursor: pointer;
}

.collapse__body {
    max-height: 0;
    overflow: hidden;
    transition: all 300ms ease;
}
.hidden {
    display: none;
}

JavaScript

const questions = document.querySelectorAll(".collapse__head");

  questions.forEach((question) => {
    question.addEventListener("click", function () {
      let openQuestion = document.querySelector(".collapse__head.active");

      if (openQuestion && openQuestion !== this) {
        setAnswer(openQuestion);
      }

      setAnswer(question);
    });
  });

  function setAnswer(question) {
    question.classList.toggle("active");

    let answer = question.nextElementSibling;

    if (answer.style.maxHeight) answer.style.maxHeight = null;
    else answer.style.maxHeight = answer.scrollHeight + "px";
}

jQuery(document).ready(function($) {

 $("#search-qa").on('keyup', function() {

  let searchText = $(this).val().toLowerCase();

  $(".collapse *").each(function() {
  
    let text = $(this).immediateText().toLowerCase();

    if (text.indexOf(searchText) == -1) {
      $(this).parents('.collapse').addClass('hidden');
    }
    else {
      $(this).parents('.collapse').removeClass('hidden');
    }
  });

});

})

$.fn.immediateText = function() {
  return this.contents().not(this.children()).text();
};