Jquery Bootstrap Accordian FAQ Search

Question

I'm working on a rather large FAQ page that needs to have multiple sections. It needs an efficient search function and I've put one together based on a previous answer, but I'm stuck on a couple points.

1. Search function is not working - seems to be not picking the correct 'panelContainerId'
2. How to combine multiple accordion IDs into the search function
3. How to highlight the search term in the result

Here's my working codes - see below also here https://jsfiddle.net/clappertrapp/92vxzes7/71/

jQuery(document).ready(function ($) {
  
// This section makes the search work.
(function() {
  var searchTerm, panelContainerId;
  $('#accordion_search_bar').on('change keyup', function() {
    searchTerm = $(this).val();
    //console.log( $(this).val() );
    $('#accordionname1 > .panel, #accordionname2 > .panel').each(function() { // is this the right way to add multiple sections? 
      panelContainerId = '#' + $(this).attr('id'); // << should be collapse10 or 11 etc, but not getting it
      
      //console.log(  $(this).attr('id')  );
      

      // Makes search to be case insesitive 
      $.extend($.expr[':'], {
        'contains': function(elem, i, match, array) {
          return (elem.textContent || elem.innerText || '').toLowerCase()
            .indexOf((match[3] || "").toLowerCase()) >= 0;
        }
      });

      // END case insesitive

      // Show and Hide Triggers
      $(panelContainerId + ':not(:contains(' + searchTerm + '))').hide(); //Hide the rows that done contain the search query.
      $(panelContainerId + ':contains(' + searchTerm + ')').show().css({"background-color":"red"}); //Show the rows that contain answer - highlight with red!

    });
  });
}());
// End Show and Hide Triggers


// END 
});

//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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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">
  </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 postclass">
          <p>You have to trust that it is amazing!</p>
        </div>
      </div>
    </div>

</div>

<h2 id="two">Section two - How to be amazed</h2>
  <div class="panel-group" id="accordionname2">
  
    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Where do I sign up to become amazed?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You sign up at the Be Amazed sign up page</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="#accordionname2" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What happens once I am sign up to be amazed?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Once you've signed up, we'll be in touch to amaze you.</p>
        </div>
      </div>
    </div>

</div>

<h2 id="three">Section three - Refunds</h2>
  <div class="panel-group" id="accordionname3">  
     
    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse10">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>I wasn't amazed - can I get a refund?</h5>
        </a>
      </div>
      <div id="collapse10" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Well that's too bad, we did try to amaze you, but what we thought was amazing, you didn't. so we will give you an amazing credit.</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="#accordionname3" href="#collapse11">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>
            What can I do with the credit?</h5>
        </a></div>
      <div id="collapse11" class="panel-collapse collapse ">
        <div class="panel-body postclass">

          <p>Well, it's amazing because it's useless of course!</p>
        </div>
      </div>
    </div>


</div>
</div>

Answer 1

As here you need to hide entire panel you can use panel-default class .First hide all divs with that class name and then use :contains to check if the panel has the searchTerm which is search by user or not depending on this add css to that particular panel only .

Then , for reset button use $(".panel-group").find(".panel-default").show() to show all panel which is hidden while typing and also here you change background-color to normal or any other color .

Demo Code :

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

  // This section makes the search work.
  (function() {
    var searchTerm, panelContainerId;
    $('#accordion_search_bar').on('change keyup', function() {
      searchTerm = $(this).val();
      var collapse = $(".panel-group");
      if ($(this).val() != "") {
  //find panel default hide them
        collapse.find(".panel-default").hide(); //hide all li 
//loop through panel group
        $('.panel-group').each(function() {
        //check if matches
          collapse.find('.panel-collapse:contains(' + searchTerm + ')').parent().show().css({
            "background-color": "red"
          });

        });
      } 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

  });

});

// 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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<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>
<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 postclass">
          <p>You have to trust that it is amazing!</p>
        </div>
      </div>
    </div>

  </div>

  <h2 id="two">Section two - How to be amazed</h2>
  <div class="panel-group" id="accordionname2">

    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname2" href="#collapse12">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>Where do I sign up to become amazed?</h5>
        </a>
      </div>
      <div id="collapse12" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>You sign up at the Be Amazed sign up page</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="#accordionname2" href="#collapse13">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> What happens once I am sign up to be amazed?</h5>
        </a>
      </div>
      <div id="collapse13" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Once you've signed up, we'll be in touch to amaze you.</p>
        </div>
      </div>
    </div>

  </div>

  <h2 id="three">Section three - Refunds</h2>
  <div class="panel-group" id="accordionname3">

    <div class="panel panel-default panel-even">
      <div class="panel-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionname3" href="#collapse14">
          <h5><i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i>I wasn't amazed - can I get a refund?</h5>
        </a>
      </div>
      <div id="collapse14" class="panel-collapse collapse ">
        <div class="panel-body postclass">
          <p>Well that's too bad, we did try to amaze you, but what we thought was amazing, you didn't. so we will give you an amazing credit.</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="#accordionname3" href="#collapse15">
          <h5>
            <i class="icon-minus primary-color"></i>
            <i class="icon-plus"></i> What can I do with the credit?</h5>
        </a>
      </div>
      <div id="collapse15" class="panel-collapse collapse ">
        <div class="panel-body postclass">

          <p>Well, it's amazing because it's useless of course!</p>
        </div>
      </div>
    </div>


  </div>
</div>