JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>
<input required="required" value="Evento" name="tipo" id="evento" type="radio" />
<label for="tipo">Evento.</label>
<input required="required" value="Viagem" name="tipo" id="viagem" type="radio" />
<label for="tipo">Viagem</label>
</td>
</tr>
</table>
<table id="tevento" class="tabelaextra escondida"><tr><td>Tabela de Eventos</td></tr></table>
<table id="tviagem" class="tabelaextra escondida"><tr><td>Tabela de Viagens</td></tr></table>
CSS
.escondida {
display:none;
}
JavaScript
var input = document.querySelectorAll('input[type="radio"]');
var tabelaextra = document.querySelectorAll('table.tabelaextra');
function mostrar(el) {
for (var i = 0; i < tabelaextra.length; i++) {
tabelaextra[i].classList.add('escondida');
}
document.getElementById('t' + el.id).classList.remove('escondida');
}
for (var i = 0; i < input.length; i++) {
console.log(i, input.length, input[i]);
input[i].addEventListener('click', function () {
mostrar(this);
});
}