jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="form-container">
  <form id="suggested-search" class="search search-suggestions">
    <input type="text" name="search" class="search-input" id="search">
    <ul class="suggestions" id="suggestions-list">
      <li data-keywords="hiddentag1, hiddentag2"><a href="#visibletag">Visibletag</a></li>
      <li data-keywords="other, veryother"><a href="#something-else">Something else</a></li>
      <li data-keywords="best, unique"><a href="#click-here">Click here</a></li>
    </ul>
  </form>
</div>
<div class="content">
  <section id="visibletag">This is the most visible Tag, it contains hiddentag1 and hiddentag2</section>
  <section id="something-else">Here you see something else, an other, veryother place</section>
  <section id="click-here">This is the best and uniques tag so you shoud click here</section>
</div>

CSS

body {
  padding: 2%;
}
.search{
  margin-bottom:2em;
}
.suggestions{
  opacity:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  width:50%;
  transition:opacity 250ms ease;
}
.search.active .suggestions{
  opacity:1;
  pointer-events:all;
}
section{
  padding:2em 0;
  border-top:1px solid #CCCCCC;
}

JavaScript

;(function($){
  'use strict';
  
  var selectors = {
        form: '#suggested-search',
        input: '#search',
        suggestions: '#suggestions-list',
        content: '.content section',
      },
      class_names = {
        active: 'active',
      },
      data_attribute = 'keywords',
      $form = $(selectors.form),
      $input = $(selectors.input),
      $suggestions = $(selectors.suggestions),
      suggestions = function(){
        if ( $input[0].value.length > 2 && $suggestions[0].children.length > 0 ) {
          if ( !$form[0].classList.contains(class_names.active) ) {
            $form[0].classList.add(class_names.active);
          }
        } else {
          if ( $form[0].classList.contains(class_names.active) ) {
            $form[0].classList.remove(class_names.active);
          }
        }
      };
  
  setTimeout(function(){ // move to async to keep the liveFilter code below - just for optical purpose
    $(selectors.input).fastLiveFilter(selectors.suggestions, {  // filter articles
      callback: suggestions  // a live search was performed
    });
  }, 10);

})(jQuery);

jQuery.fn.fastLiveFilter=function(list,options){options=options||{};list=jQuery(list);var input=this;var lastFilter='';var timeout=options.timeout||0;var callback=options.callback||function(){};var keyTimeout;var lis=list.children();var len=lis.length;var oldDisplay=len>0?lis[0].style.display:"block";callback(len);input.change(function(){var filter=input.val().toLowerCase();var li,innerText;var numShown=0;for(var i=0;i<len;i+=1){li=lis[i];innerText=!options.selector?(li.textContent||li.innerText||""):$(li).find(options.selector).text();if(innerText.toLowerCase().indexOf(filter)>=0){if(li.style.display=="none"){li.style.display=oldDisplay}numShown+=1}else{if(li.style.display!="none"){li.style.display="none"}}}callback(numShown);return...