JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="accordion-bral">

 <div>
   <!-- accordion item 1 -- start -->
   <input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
   <label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
   <div class="article ac-content">
test
   </div>
 </div>
 <!-- accordion item 1 -- end -->

 <div>
   <!-- accordion item 2 -- start -->
   <input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-2">responsive accordion<i></i></label>
   <div class="article ac-content">
tewst
   </div>
 </div>
 <!-- accordion item 2 -- end -->

 <div>
   <!-- accordion item 3 -- start -->
   <input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
   <div class="article ac-content">
tesw
   </div>
 </div>
 <!-- accordion item 3 -- end -->

 <div>
   <!-- accordion item 4 -- start -->
   <input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-4">Forms are cool<i></i></label>
   <div class="article ac-content">
tewt
     </div>
   </div>
 </div>

JavaScript

$(document).ready(function($) {
  $('.ac-input').click(function(){
$(".ac-content").slideUp('fast');
    //Expand or collapse this panel
    $(this).parent().find('.ac-content').slideToggle('fast');

    //Hide the other panels
    

  });
});