JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<select>
    <option value="my1">Test1</option>
    <option value="my2">Test2</option>
</select>

<div id="display" class="my1">
    <div id="my1">
        <p>Some Text in 1</p>
    </div>
    <div id="my2">
        <p>Some Text in 2</p>
    </div>
</div>

CSS

.my1 > :not(#my1){
    display: none;
}
.my2 > :not(#my2){
    display: none;
}

JavaScript

document.querySelector("select").addEventListener("change", function(){
    var c = document.querySelector("#display");
    c.className = "";
    c.classList.add(this.value);
});