JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<input type="text" id="search">

<div class="accordion">
  <div class="accordion-item">
    <a class="dropdown">Question 1?</a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet</p>             
    </div>
  </div>
  <div class="accordion-item">
    <a class="dropdown">How to bla bla?</a>
    <div class="content">
      <p>Apple, Windows</p>             
    </div>
  </div>
</div>

CSS

.content{
  display:none
}
.accordion-item{
  margin:16px 0;
}
.dropdown{
  border:1px solid #F97432;
  padding: 8px;
}

JavaScript

$('.accordion a').click(function(){
	$(this).next('.content').slideToggle(250);
});

$("#search").on('keyup', function(){
	var value = $(this).val();
  $(".accordion div").each(function () {
  	if ($(this).text().toLowerCase().indexOf(value) > -1) {
      $(this).show();                 		
      $(this).prevAll('.accordion').first().show();
    } else {
    		$(this).hide();
     	}
    });
})