Change display at the push of a button

Navigation
0

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

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

I took some examples here in the forum to do with JavaScript, but I could not get it to work.

Follow 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>
    
asked by anonymous 16.11.2017 / 21:18

1 answer

0

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

Add the function in 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";
    }
}
    
16.11.2017 / 21:34
Save to Arduino's EEPROM Memory UTF-8 Not working on all pages