JSFiddle - React, Tailwind, and code Playground

by Alexis Evertt López Espinoza

HTML

Elije una opción:
  
<select id="opciones">
  <option value="">Elije una opción de abajo</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="bin">Bin</option>
  <option value="baz">baz</option>
</select>
  
  
<section id="foo">
  <p>Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo</p>
  <p>Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo</p>
  <p>Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo</p>
</section>
  
<section id="bar">
  <p>Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar</p>
  <p>Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar</p>
  <p>Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar</p>
</section>
  
<section id="bin">
  <p>Bin Bin Bin Bin Bin Bin Bin Bin Bin Bin</p>
  <p>Bin Bin Bin Bin Bin Bin Bin Bin Bin Bin</p>
  <p>Bin Bin Bin Bin Bin Bin Bin Bin Bin Bin</p>
</section>
  
<section id="baz">
  <p>Baz Baz Baz Baz Baz Baz Baz Baz Baz Baz</p>
  <p>Baz Baz Baz Baz Baz Baz Baz Baz Baz Baz</p>
  <p>Baz Baz Baz Baz Baz Baz Baz Baz Baz Baz</p>
</section>

CSS

section{
  width: 50%;
  margin: 1%;
  border: .1rem lightgray solid;
  padding: .5% 1%;
  display: none;
}

#foo{
  background-color: orange;
}

#bar{
  background-color: cyan;
}

#bin{
  background-color: yellow;
}

#baz{
  background-color: aquamarine;
}

.visible{
  display: block;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
  var select = document.querySelector("#opciones"), 
      valor, antiguo, nuevo;
  
  select.addEventListener("change", function(){
    valor = this.value ? this.value : false;
    antiguo = document.querySelector(".visible");
    nuevo = valor ? document.querySelector("#" + valor) : null;
      
    if (antiguo){
      antiguo.className = "";
    }
    
    if (valor){
      nuevo.className = "visible";
    }
  }, false);
});