Jquery Accordion filter

Anil Published at Dev

Anil

I want to filter based input text the headers on accordion in jquery,can you please mention how to achieve this, i tried with table but the accordion effect exist on row though filtered based on input.`

<div id="accordion">
   <forEach var="group" items="${groups}">
      <h3>
         <table class="order-table">
            <tr style="border-top: 0px;">
               <td>${group.seriesName}</td>
            </tr>
         </table>
      </h3>`enter code here`
      <div>Input text on expand</div>
   </forEach>
</div>

Anil

Here the solution ,

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script>$(function() {
             $( "#accordion" ).accordion({
                active: false,
                collapsible: true
            });
 });</script>

<script>
$(document).ready(function(){
  $("input").keyup(function(){
   var bla = $('#txt_name').val();
   $( "h3" ).each(function(){
        var htxt=$(this).text();
        alert(htxt);
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
  });
});

</script>
</head>
<body>
<input type="text" id="txt_name"/>
<div id="accordion">
  <h3>Hi1</h3>
  <div>hello</div>
  <h3>Hi2</h3>
  <div>hello</div>
  <h3>Hi3</h3>
  <div>hello</div>

</div>
</body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.