JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="accordion">
    <dl>
        <div>
            <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Fideicomiso Patrimonio AutĂłnomo Estrategias Inmobiliarias</a>
            <div class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
                <ul>
                    <li><a href="/wps/wcm/connect/fiducorficolombiana/553c3b29-2b85-40ff-9116-293648356d25/Adenda1.pdf?MOD=AJPERES" target="_blank">Adenda 1 </a>
                    </li>
                    <li><a href="/wps/wcm/connect/fiducorficolombiana/94240c0e-1966-4671-a21f-53fb2a91f256/Adenda2.pdf?MOD=AJPERES" target="_blank">Adenda 2 </a>
                    </li>
                    <li><a href="/wps/wcm/connect/fiducorficolombiana/9310590f-795d-47e5-9680-acc4da81fc1f/Adenda3.pdf?MOD=AJPERES" target="_blank">Adenda 3 </a>
                    </li>
                    <li><a href="/wps/wcm/connect/fiducorficolombiana/8e6dae34-c853-4dfc-94d0-6323fa74f332/Adenda4.pdf?MOD=AJPERES" target="_blank">Adenda 4 </a>
                    </li>
                    <li><a href="/wps/wcm/connect/fiducorficolombiana/c181809e-53b5-4ad0-88d8-ae9820df4f2c/Adenda5.pdf?MOD=AJPERES" target="_blank">Adenda 5 </a>
                    </li>
                </ul>
            </div>
        </div>
    </dl>
</div>

CSS

.accordion .accordion-content{
  display: none;
}

JavaScript

$('.accordion a').click(function(){
if($(this).parent('dl').hasClass('active')){
  $('.accordion > dl').removeClass('active');
    $('.accordion .accordion-content').slideUp();
  }else{
  $('.accordion .accordion-content').slideUp();
  $('.accordion > dl').removeClass('active');
  $(this).parent('dl').addClass('active');
  $(this).parent('dl').children('.accordion-content').slideDown();
  }
  
  return false;
})