Change display at the push of a button

Question

I have a page that has two tables, and I have two buttons "option1" and "option2", one for each table.

I want to press the button "option1", keep the first table visivele leave invisible the second table, while pressing the button "option2" leave the second table visible and the first invisible.

I took some examples here on the forum to do with Javascript, but I could not make it work.

Follows my code:

<h2 class="col-md-12 d-md-flex justify-content-md-start h2-pagina">Avisos</h2>

<div class="col-md-12 d-md-flex justify-content-center">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked>Ativos
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="option2" autocomplete="off">Expirados
        </label>
    </div>
</div>

<div class="container-fluid col-md-12 d-md-flex justify-content-md-center" style="max-width: 100%; overflow-x: auto; overflow-y: hidden;" id="ativos">
    <table class="table table-bordered table-hover" style="background-color: white;">
        <thead>
            <tr>
                <th style="vertical-align: middle;">Mensagem</th>
                <th style="vertical-align: middle;">Data Inicial</th>
                <th style="vertical-align: middle;">Data Final</th>
                <th style="vertical-align: middle;">Tempo de Exibição</th>
                <th colspan="2" style="background-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-top-color: rgb(220, 220, 220);"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var msgAtivas in ViewBag.MsgsAtivas)
            {
                <tr>
                    <td style="vertical-align: middle;">@msgAtivas.Mensagem</td>
                    <td style="vertical-align: middle;">@msgAtivas.DataInicial</td>
                    <td style="vertical-align: middle;">@msgAtivas.DataFinal</td>
                    <td style="text-align: center; vertical-align: middle;">@msgAtivas.Tempo segundos</td>
                    <!--Html.ActionLink(texto que será apresentado na página html, "página que vai ser direcionado ao ser clicado", new { codLinha = linha.CodLinha que será passado para a página que foi redirecionada})-->
                    <td style="text-align: center; vertical-align: middle;">
                        @Html.ActionLink("editar", "FormInsereAviso", new
                                                                       {
                                                                           codigo = msgAtivas.Codigo,
                                                                           mensagem = msgAtivas.Mensagem,
                                                                           tempo = msgAtivas.Tempo,
                                                                           dataInicial = msgAtivas.DataInicial,
                                                                           dataFinal = msgAtivas.DataFinal
                                                                       })
                </td>
                <td style="text-align: center; vertical-align: middle;"><a style="color:red;" href="http://localhost:51270/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>
                @*<td style="text-align: center"><a style="color:red;" href="http://www.acessoseg.com.br/PortalAraguaina/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>*@
            </tr>
            }
        </tbody>
    </table>
</div>






<div class="container-fluid col-md-12 d-md-flex justify-content-md-center" style="max-width: 100%; overflow-x: auto; overflow-y: hidden;" id="expirados">
    <table class="table table-bordered table-hover" style="background-color: white;">
        <thead>
            <tr>
                <th style="vertical-align: middle;">Mensagem</th>
                <th style="vertical-align: middle;">Data Inicial</th>
                <th style="vertical-align: middle;">Data Final</th>
                <th style="vertical-align: middle;">Tempo de Exibição</th>
                <th colspan="2" style="background-color: rgb(220, 220, 220); border-right-color: rgb(220, 220, 220); border-top-color: rgb(220, 220, 220);"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var MsgsExpiradas in ViewBag.MsgsExpiradas)
            {
                <tr>
                    <td style="vertical-align: middle;">@MsgsExpiradas.Mensagem</td>
                    <td style="vertical-align: middle;">@MsgsExpiradas.DataInicial</td>
                    <td style="vertical-align: middle;">@MsgsExpiradas.DataFinal</td>
                    <td style="text-align: center; vertical-align: middle;">@MsgsExpiradas.Tempo segundos</td>
                    <!--Html.ActionLink(texto que será apresentado na página html, "página que vai ser direcionado ao ser clicado", new { codLinha = linha.CodLinha que será passado para a página que foi redirecionada})-->
                    <td style="text-align: center; vertical-align: middle;">
                        @Html.ActionLink("reativar", "FormInsereAviso", new
                   {
                       codigo = MsgsExpiradas.Codigo,
                       mensagem = MsgsExpiradas.Mensagem,
                       tempo = MsgsExpiradas.Tempo,
                       dataInicial = MsgsExpiradas.DataInicial,
                       dataFinal = MsgsExpiradas.DataFinal
                   })
                    </td>
                    <td style="text-align: center; vertical-align: middle;"><a style="color:red;" href="http://localhost:51270/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>
                    @*<td style="text-align: center"><a style="color:red;" href="http://www.acessoseg.com.br/PortalAraguaina/Aviso/[email protected]" ; onclick="return confirm('Confirma exclusão da linha?')">remover</a></td>*@
                </tr>
            }
        </tbody>
    </table>
</div>


</body>
</html>

Answer 1

Define that the second div will get hidden by assigning the style="display:none;" and assign to its inputs the property: onchange="ManipulaConteudo();".

Add the function to your javascript:

function ManipulaConteudo()
{
    var ativos = document.getElementById("ativos");
    var expirados = document.getElementById("expirados");

    if(document.getElementById("option1").checked)
    {
        ativos.style.display = "block";
        expirados.style.display = "none";
    }
    else
    {
        ativos.style.display = "none";
        expirados.style.display = "block";
    }
}