jQuery addClass example

Change class name on click in jQuery

by Luca Detomi

HTML

<p>Type something in the input fields to search for a specific text inside below set of elements:</p>

<div class="container">
<div class="column">
    <input id="ulListInputFilter" type="text" placeholder="Search only in UL List">

    <div id="ulList">
      <ul>
        <li>I am a cat</li>
        <li>Another cat</li>
        <li>Bear Cub</li>
        <li>Car Door</li>
        <li>Another option</li>
        <li>Another Animal</li>
      </ul>

      <p>I am a paragraph.</p>
      <div>I am a div element inside div.</div>
      <button>I am a button</button>
      <button>Another button</button>
      <p>Another paragraph.</p>
    </div>
  </div>
  
  <div class="column">
    <input id="anyItemListInputFilter" type="text" placeholder="Search any item type">

    <div id="anyItemList">
      <ul>
        <li>I am a cat</li>
        <li>Another cat</li>
        <li>Bear Cub</li>
        <li>Car Door</li>
        <li>Another option</li>
        <li>Another Animal</li>
      </ul>
      
      <p>I am a paragraph.</p>
      <div>I am a div element inside div.</div>
      <button>I am a button</button>
      <button>Another button</button>
      <p>Another paragraph.</p>
    </div>
  </div>
  
  <div class="column">
    <input id="anyItemListAnimatedInputFilter" type="text" placeholder="Search any item type (animated)">

    <div id="anyItemAnimatedList">
      <ul>
        <li>I am a cat</li>
        <li>Another cat</li>
        <li>Bear Cub</li>
        <li>Car Door</li>
        <li>Another option</li>
        <li>Another Animal</li>
      </ul>
      
      <p>I am a paragraph.</p>
      <div>I am a div element inside div.</div>
      <button>I am a button</button>
      <button>Another button</button>
      <p>Another paragraph.</p>
    </div>
  </div>
</div>

CSS

.container {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  -webkit-column-rule: 1px solid black;
     -moz-column-rule: 1px solid black;
          column-rule: 1px solid black;
}

.column {
  overflow: hidden;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

#anyItemAnimatedList * {
  transition:all 0.5s ease;
  opacity:1;
  max-height:500px;
 overflow-y:hidden;
}

#anyItemAnimatedList ul {
  list-style-position:inside;
}

#anyItemAnimatedList .hidden {
  max-height:0;
  opacity:0;
  border:0;
}

JavaScript

$(document).ready(function(){ 
  $("#ulListInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#ulList li").filter(function() {
    	let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(item);
    });
  });
  
  $("#anyItemListInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#anyItemList *").filter(function() {
    	let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(item);
    });
  });
  
  $("#anyItemListAnimatedInputFilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#anyItemAnimatedList *").filter(function() {
    	let item = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggleClass('hidden',!item);
    });
  });
});