How to hide div when selecting options from a radio

Question

How to hide div when selecting options from a radio

Navigation

#1 by (3 votes)

2

As trivial as it sounds, I'm having trouble executing this script, the problem I have is the following, when I enter a page I show a div with a selected content from my bank and this is being done correctly, from then on the user has the option to show this information in a Grid or in a List, I created a radio with two options, Grid and List and I am trying to hide the first div that is shown when entering the page when one of these options is selected. What I've done so far is this:

    $(window).load(function(){  
        $(':radio').change(function (event) {       
            var id = $(this).data('id');
            $('#' + id).addClass('none').siblings().removeClass('none');

            if ((id == "lista") || (id == "grid")) {
                document.getElementById('geral').style.display="none";                          
            }

        }); 
    });

The div's look like this:

<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>

html jquery

asked by anonymous 20.10.2015 / 15:35

1 answer

How to make a program in Java search in a certain information file and return a string How to fix "flicker" of webfont of icons when doing reload of the page?

score 3 · Accepted Answer

You can simply check the .change () event and change the display.

$(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");
        }
    });
});

.none{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="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>

You can add or remove the class equal to your example, but it's up to you.

Example on JSFiddle.