JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="faqs" id="faqs">
  
  <div class="faqs__item">
    <h4 class="faqs__item__title">Pellentesque egestas neque sit amet</h4>
    <div class="faqs__item__content">
      <p>Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Phasellus magna. Etiam feugiat lorem non metus. Phasellus gravida semper nisi.</p>
    </div>
  </div>
  
  <div class="faqs__item">
    <h4 class="faqs__item__title">Duis lobortis massa imperdiet quam</h4>
    <div class="faqs__item__content">
      <p>Pellentesque auctor neque nec urna. Fusce egestas elit eget lorem. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec id justo. Praesent egestas tristique nibh.</p>
    </div>
  </div>
  
  <div class="faqs__item">
    <h4 class="faqs__item__title">Phasellus ullamcorper ipsum rutrum nunc</h4>
    <div class="faqs__item__content">
      <p>Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Fusce vel dui. Fusce commodo aliquam arcu. Fusce commodo aliquam arcu.</p>
    </div>
  </div>
  
  <div class="faqs__item">
    <h4 class="faqs__item__title">Duis lobortis massa imperdiet quam</h4>
    <div class="faqs__item__content">
      <p>Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Phasellus consectetuer vestibulum elit. Fusce fermentum. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Praesent ut ligula non mi varius sagittis.</p>
    </div>
  </div>
  
  <div class="faqs__item">
    <h4 class="faqs__item__title">Cras risus ipsum faucibus ut</h4>
    <div class="faqs__item__content">
      <p>Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at...

CSS

.faqs.faqs-bound .faqs__item .faqs__item__content{
  display: none;
}

.faqs.faqs-bound .faqs__item.faqs__item--open .faqs__item__content{
  display: block;
}

JavaScript

/**
 * FAQ lookup
 */
var faqs = {
	list: []
};

faqs.init = function(selector){
	this.faqListEl = document.querySelector(selector);
  this.buildList();
  this.buildDom();
  this.renderList(this.list);
}

faqs.buildList = function(){
	var _t = this;
	var qs = this.faqListEl.querySelectorAll('.faqs__item');
	Array.prototype.forEach.call(qs, function(faqSingle, i, nodeList){
		//faqSingle.setAttribute('data-faq-id', 'faq-' + i);
    _t.list.push({
    	id: i,
      title: faqSingle.querySelector('.faqs__item__title').textContent.trim(),
      content: faqSingle.querySelector('.faqs__item__content').textContent.trim(),
      html: faqSingle.innerHTML,
      weight: 0
    });
    
    faqSingle.parentNode.removeChild(faqSingle);
  });
}

faqs.buildDom = function(){
	var search = document.createElement('input');
  search.setAttribute('placeholder', 'Search FAQs');
  search.setAttribute('type', 'search');
  search.setAttribute('id', 'faqs__input');
  search.setAttribute('class', 'faqs__input');
	this.faqListEl.appendChild(search);
  this.bindInput();
  
  var listStage = document.createElement('div');
  listStage.setAttribute('id', 'faqs__stage');
  listStage.setAttribute('class', 'faqs__stage');
	this.faqListEl.appendChild(listStage);
  this.faqListStage = document.getElementById('faqs__stage');
}

faqs.bindSingles = function(){
  var qs = this.faqListEl.querySelectorAll('.faqs__item');
  Array.prototype.forEach.call(qs, function(faqSingle){
  	faqSingle.querySelector('.faqs__item__title').addEventListener('click', function(e){
    	e.preventDefault();
      if(this.parentNode.className.match(/\bfaqs__item\-\-open\b/ig)){
      	// is open
        this.parentNode.className = this.parentNode.className.replace(/\s?\bfaqs__item\-\-open\b/ig, '');
      }else{
      	// is closed
      	this.parentNode.className += ' faqs__item--open';
      }
    });
  });
}

faqs.bindInput = function(){
  this.faqListEl.querySelector('.faqs__input').addEventListener('keyup',...