Show result in collapse jQuery

Question

I have my HTML, which is an accordion containing few panels. I have included a search box to search for a particular panel. I am able to search and find the result. I face difficulty in showing the result in collapse. Initially, all the panels will be in collapse and after search result, it should be in (collapse in)- shows the complete content not only the panel heading.

My HTML:-

<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" 
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>

My jQuery for search is

(function(){
    var searchTerm, panelContainerId;
    $.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();
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
  ')').show();
   });
  });
  }());

With the search result, I should give the collapse out panel view.

Show(). collapse;

can someone help me with this?

Answer 1

try like this

(function(){
    var searchTerm, panelContainerId;
    $.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();
   var textboxval =$("#accordion_search_bar").val();
   $('#accordion > .panel').each(function () {
    debugger;
    panelContainerId = '#' + $(this).attr('id');
    var BodyId=panelContainerId.split('_')[0];
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
  ')').show();
  if(textboxval.length > 2){
  $(BodyId).css('display','block');
  }
  else{
  $(BodyId).css('display','none');
  }
   });
  });
  }());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" class="form-control"
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>

Answer 2

@Indu Velayutham,

At the initial level, all panel are in collapsed mode. So, $(".panel-collapse").css("display","none") is there with pageload,

Now when you try to search you have some value in your search box,[i.e Heading search is already working in your case]

So put a logic accordingly, If heading finds then switch display:none css to display:block so all the content inside searchable panel is visible.

(FYI, Here no specification is given whether the user is using bootstrap or any other js. So I just give my answer based on basic jquery fundamental :) )

try with,

(function(){
    $(".panel-collapse").css("display","none");
    var searchTerm, panelContainerId;
    $.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();
  //
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
   
    if(searchTerm != "")
    {
      $(this).find(".panel-collapse").css("display","block");
    }
    else{
      $(this).find(".panel-collapse").css("display","none");
    }
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
     $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
    ')').show();
   });
  });
  }());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" 
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>

let me know is this case works for you?