JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<input type="radio" name="group" value="geral">Geral<br>
<input type="radio" name="group" value="lista">Lista<br>
<input type="radio" name="group" value="grid">Grid<br/>

<div id="geral">
  Geral Mostra ao entrar na página
</div>

<div id="lista" class="none">
  Lista, mostra ao selecionar Lista no radio
</div>

<div id="grid" class="none">
  Grid, mostra ao selecionar Lista no radio
</div>

CSS

.none{
    display:none;
}

JavaScript

$(document).ready(function() {
    $('input[type=radio]').change(function() {
        if (this.value == 'geral') {
            $("#geral").css("display","block");
            $("#lista").css("display","none");
            $("#grid").css("display","none");
        }
        else if (this.value == 'lista') {
            $("#lista").css("display","block");
            $("#geral").css("display","none");
            $("#grid").css("display","none");
        }
         else if (this.value == 'grid') {
            $("#grid").css("display","block");
            $("#lista").css("display","none");
            $("#geral").css("display","none");
        }
    });
});