JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="validation">
                        <div class="shadow mb-4 details-formations" id="preqstep2">
                            <a href="#formationglobal" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h6 class="m-0 text-gray-700">Formations </h6>
                            </a>
                            <div class="eachaccordion collapse show" id="formationglobal" style="">
                                                                                                <input type="hidden" id="nameformationaccordion" value="anglais">
                            <a data-idformation=" 12" href="#formation-12" data-id-formation="anglais" class=" card-header py-3 collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardExample">
                                <h6 class="m-0 text-gray-700">anglais</h6>
                            </a>
                            <!-- Card Content - Collapse -->
                                                                                                                                        <input type="hidden" id="nameformationaccordion" value="dsds">
                            <a data-idformation=" 30" href="#formation-30" data-id-formation="dsds" class=" card-header py-3 collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseCardExample">
                                <h6 class="m-0 text-gray-700">dsds</h6>
                            </a>
                            <!-- Card Content - Collapse -->
                                                                                                                                   ...

CSS

.show{
  display:block !important;
}
.hidden{
  display:none;
}

JavaScript

var arrNumbername= new Array();
$('.validation input[type=hidden]').each(function(){
    arrNumbername.push($(this).val());
})
$('.validation a').click(function() {
alert("tt")
  $(this).addClass("show");
  $(".card-header").addClass("hidden");


});