JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-event-accordion">
<div class="row ev-accord" id="evtabs-1">
  <div class="col-md-6"><h2>Masterclass </h2></div>
  <div class="col-md-6">
  <div id="ev1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.Lorem ipsum dolor sit Ut enim ad minim veniam, quis nostrud exercitation ullamco.Lorem ipsum dolor sit 
  </p><p><a class="sppb-btn  sppb-btn-primary sppb-btn-lg sppb-btn-rounded" href="#">LEARN MORE</a></p>
  </div>
  </div>
</div><div class="row ev-accord" id="evtabs-2">
  <div class="col-md-6"><h2>Mixer</h2></div>
  <div class="col-md-6">
  <div id="ev2">
  <p>Maecenas eu arcu tellus. Nulla facilisi. Curabitur in eros eget metus ullamcorper ultrices id nec leo. Maecenas gravida, nibh ut vulputate laoreet, sem turpis ultrices odio, eget pharetra risus ipsum at nunc. Nam quis sapien sollicitudin, rutrum purus id, suscipit nibh.</p><p><a class="sppb-btn  sppb-btn-primary sppb-btn-lg sppb-btn-rounded" href="#">LEARN MORE</a></p>
  </div>
  </div>
</div>
<div class="row ev-accord" id="evtabs-3">
  <div class="col-md-6"><h2>Academy</h2></div>
  <div class="col-md-6">
  <div id="ev3">
  <p>Suspendisse commodo laoreet ante eget rhoncus. Duis a tortor metus. Maecenas metus quam, consequat eget nisi ac, aliquam eleifend tortor. Proin urna metus, pellentesque non suscipit et, pulvinar nec nisl. Aliquam ac elit vehicula, iaculis felis quis, efficitur erat. 
  </p><p><a class="sppb-btn  sppb-btn-primary sppb-btn-lg sppb-btn-rounded" href="#">LEARN MORE</a></p>
  </div>
  </div>
</div>

JavaScript

document.getElementById("ev2").style.display='none';
document.getElementById("ev3").style.display='none';


$('#evtabs-1').click(function() {
   $('#ev1').show();
   $('#ev2').hide();   
   $('#ev3').hide();   
});
$('#evtabs-2').click(function() {
   $('#ev1').hide();
   $('#ev2').show();   
   $('#ev3').hide();   
});
$('#evtabs-3').click(function() {
   $('#ev1').hide();
   $('#ev2').hide();   
   $('#ev3').show();   
});