JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<form>
<select id="choices">
    <option value="none">Select one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
    <div id="option1" class="hide">Opt 1 Text</div>
    <div id="option2" class="hide">Opt 2 Text</div>
    <div id="option3" class="hide">Opt 3 Text</div>
    <div id="option4" class="hide">Opt 4 Text</div>
    <div id="option5" class="hide">Opt 5 Text</div>
    <div id="option6" class="hide">Opt 6 Text</div>
    <div id="option7" class="hide">Opt 7 Text</div>

CSS

.hide {
   display: none
}

JavaScript

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});