JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="selecionaEstado('br-mg')">
Minas Gerais
</button>
<button onclick="selecionaEstado('br-ba')">
Bahia
</button>
<hr/>
<div id="br-mg" class="wrapper">
MINAS GERAIS
</div>
<div id="br-ba" class="wrapper">
BAHIA
</div>
CSS
.wrapper {
display: none;
}
JavaScript
function selecionaEstado(estado) {
const event = new CustomEvent("alteraEstado", {
detail: { estado }
});
document.dispatchEvent(event);
}
document.addEventListener("alteraEstado", (event) => {
const estado = event.detail.estado;
document.querySelectorAll('.wrapper').forEach(function(el) {
el.style.display = 'none';
});
document.getElementById(estado).style.display = 'block';
});