JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown" href="javascript:void(0);">
  <h3><a>TITLE</a></h3>
  <div class="Big2" style="display: none;">
    <div class="twocolumn">
      <div class="column facLeft">
        <a class="acBtn" href="#">Read More</a>
        <div class="acBody" style="display: none;">text</div></div></div></div></div>

JavaScript

$('.dropdown').click(function(e){
if(!$(e.target).is('.acBtn')) {
    if( $(this).hasClass('ake')){
        $(this).closest('.dropdown').find('.Big2').stop().slideUp(200,'swing');
        $(this).removeClass('ake');
    }
    else{
        $(this).closest('.dropdown').find('.Big2').stop().slideDown(100,'swing');
        $(this).addClass('ake');
    }
    }
});
$('.acBtn').click(function(e){
e.preventDefault();
    if( $(this).hasClass('open')){
        $(this).closest('.column').find('.acBody').stop().slideUp(200,'swing');
        $(this).removeClass('open');
    }
    else{
        $(this).closest('.column').find('.acBody').stop().slideDown(100,'swing');
        $(this).addClass('open');
    }
});