JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <select class="hideselector">
        <option value="1234">RED</option>

        <option value="5678">BLUE</option>

    </select>


<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);
    
  });
});