jQuery toggleClass example

Toggle class name on click in jQuery

by wisegorilla

HTML

<form class='searchbox'>
    <input class="searchbar" type="text" placeholder="Search.." name="search">
  </form>


<div class="row">
            <div class="s_col_no_bgcolor col-lg-12 pb0 o_we_force_no_transition" data-original-title="" title="" aria-describedby="tooltip523088">
              <div class="row">
                <div class="col-lg-12 pt16 pb16 o_colored_level o_we_force_no_transition" data-name="Box">
                  <i class="fa fa-font-awesome bg-primary s_features_grid_icon fa-2x rounded-circle o_we_force_no_transition" data-original-title="" title="" aria-describedby="tooltip938477"></i>
                  <div class="s_features_grid_content">
                    <h4>7S-Top 30 Herbstevent - Aktionsflyer<br></h4>
                    <p>Erfolgreich starten - Werbematerial - Aktionsmaterial</p>
                    <p>
                      <br>
                    </p>
                    <h4>
                      <a class="btn btn-primary" href="https://drive.google.com/open?id=1KtSLLQIR-gzNxqOCC9G93k4HEedO8TvK&amp;usp=drive_fs">Dokument</a>
                    </h4>
                  </div>
                </div>
                <div class="col-lg-12 pt16 pb16 o_colored_level o_we_force_no_transition" data-name="Box">
                  <i class="fa fa-2x fa-files-o rounded-circle bg-primary s_features_grid_icon o_we_force_no_transition" data-original-title="" title="" aria-describedby="tooltip774815"></i>
                  <div class="s_features_grid_content">
                    <h4 class="o_default_snippet_text">Ablauf einer Finanzierung nach Kaufvertragsabschluss<br></h4>
                    <p>Erfolgreich starten - Kaufvertrag - Finanzierung</p>
                    <p>
                      <br>
                    </p>
                    <h4 class="o_default_snippet_text">
                      <a class="btn btn-primary" href="https://drive.google.com/open?id=1Gym86k8JxpxQuD97xWtqMz0IT_KZ3p-S&amp;usp=drive_fs">Zum Download</a>
          ...

JavaScript

const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card p:nth-child(2)');
   const cards = document.querySelectorAll('.cards > .card');
	 
function search() {
   // Get input value
   const input = document.querySelector('.searchbox > .searchbar').value.toLowerCase();
   // Get all cards in page
   const cards = document.querySelectorAll('.row > [data-name="Box"]');
   cards.forEach(card => {
      // Get card title
      const text = card.innerText.toLowerCase();
      // Hide card if card title does not match
      card.style.display = text.includes(input) ? null : 'none';
   });
}

searchEl.addEventListener("keyup", search);