JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="parent">
  <a class="show" href="#">Show</a>
  <a class="hide" href="#">Hide</a>
  <div class="child">
    
  </div>
</div>

CSS

.child{
  width:0;
  height:100px;
  border:2px solid red;
  overflow:hidden;
  transition: width 2s;
}

.child.show{
   width:100px;
   height:100px;
}

JavaScript

$(document).ready(() => {

	$('.show').on('click', () => {
  	$('.child').addClass('show');
  })
  
  $('.hide').on('click', () => {
  	$('.child').removeClass('show');
  })
  
})