JSFiddle - React, Tailwind, and code Playground

by Benjamin DeLong

HTML

<select id=selector1 name="divshowhide">
<option value="null">choose a div</option>
<option value="#divA-holder">1</option>
<option value="#divB-holder">2</option>
<option value="#divC-holder">3</option>
</select>
<div id=divA-holder class=holder>divA-holder
        <a href=# id=divA-link>Click for Div A</a>
<div id=divA class=hide>I'm div A</div>
        </div>
<div id=divB-holder class=holder>divB-holder
        <a href=# id=divB-link>Click for Div B</a>
<div id=divB class=hide>I'm div B</div>
        </div>
<div id=divC-holder class=holder>divC-holder
        <a href=# id=divC-link>Click for Div C</a>
<div id=divC class=hide>I'm div C</div>
        </div>

CSS

.hide {display:none}

JavaScript

$(document).ready(function() {
  $('#divA-holder').hide();
  $('#divA-link').click(function() {
    $('#divA').toggle(400);
    return false;
  });
  $('#divB-holder').hide();
  $('#divB-link').click(function() {
    $('#divB').toggle(400);
    return false;
  });
  $('#divC-holder').hide();
  $('#divC-link').click(function() {
    $('#divC').toggle(400);
    return false;
  });
});

jQuery("#selector1").change(function(){
    var div = jQuery(this).val();
    $('.holder').hide(200);
    jQuery(div).show(200);
});