JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div class="layoutButton">
    
        <a class="hideselector" value="1234">ONE</a>
        <a class="hideselector" value="5678">TWO</a>
        
</div>

<div class="u_1234" id="1234">
RED
</div>
<div class="u_5678" id="5678">
BLUE
</div>

CSS

.u_1234 { height:40px; background:red; }
.u_5678 { height:40px; background:blue; }

JavaScript

$(document).ready(function(){  
    
    $('.u_1234').show(300);
    $('.u_5678').hide(300);

    
  $('.hideselector').click(function() {
      
    $('.u_1234').hide(300);
    $('.u_5678').hide(300);

    $('#' + $(this).val()).show(300);
    
  });
});