jQuery toggleClass example

Toggle class name on click in jQuery

by John Doe

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container" id="page_container">

  <div id="accordion_search_bar_container">
    <input type="search" id="accordion_search_bar" placeholder="Search" />
    <input type="button" id="accordion_search" value="Search in FAQs">
   <input type="button" id="resetbtn" value="Reset">
    
    
  </div>






  <h2 id="one">Section one - What is being amazed?</h2>
  <div class="panel-group" id="accordionname1">


    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionname1" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Tell me all about being amazed?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Doing amazing things is amazing</p>
        </div>
      </div>
    </div>

    <div class="panel panel-default panel-odd">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname1" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What's so great about being amazed?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body...

CSS

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after { 
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px; 
    margin:20px;
  }  
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title./colors
//$grey: #cacaca;

// main
#page_container {
  margin-top: 15px;
  margin-bottom: 15px;
}

// search input
#accordion_search_bar_container {
  position: relative;
  &:after { 
    content: '\e003';
    font-family: Glyphicons Halflings;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    bottom: 10px; 
    margin:20px;
  }  
  #accordion_search_bar {
    display: block;
    margin: 20px auto;
    width: 100%;
    padding: 27px 10px;
    border: 1px solid $grey;
    border-radius: 25px;
    outline: 0;
  }
}

// make all the line clickable
.panel-title a { 
    display: block;
  }
  
  
.panel-default>.panel-heading {
    border: 2px solid #b2e7f5 !important;
    }

JavaScript

// This section makes the search work.
  (function() {
    var searchTerm, panelContainerId; 
	// Create a new contains that is case insensitive
  $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
	};  
    
    
    $('#accordion_search_bar').on('change keyup paste click', function() {
      //searchTerm = $(this).val();

	  searchTerm = $(this).val(); 
	  
      var collapse = $(".panel-group");
      if ($(this).val() != "") {

//find panel default hide them
     
     collapse.find(".panel-default").hide();
		 $(".panel-group .hiddennote").remove();
		  //$(".panel-heading").hide();
      $(".panel-group").append('<div class="hiddennote">hidden - clear search result to unhide</div>');

//loop through panel group
        $(".panel-group").each(function() {
        //check if matches
        collapse.find('.panel-heading:containsCaseInsensitive(' + searchTerm + '),.panel-collapse:containsCaseInsensitive(' + searchTerm + ')').parent().show().css({
            "background-color": "#fbfdc4"
          });
          $(".panel-heading").css({ "background-color": "#f5d13b" } ) ;
		  //console.log('term=' + searchTerm)

        });
      } else {
         
        collapse.find(".panel-default").show().css({
          "background-color": ""
        });
		
		
		//show all and remove red bg 
      }
    });

  }());


  $('#resetbtn').click(function() {
    $('#accordion_search_bar').val("");
    $(".panel-group").find(".panel-default").show().css({
      "background-color": ""
    });//show all remove red bg
    //$(".panel-heading h5").show();
	 $(".panel-group .hiddennote").hide();
   $(".panel-heading").css({ "background-color": "" } ) ;

  });