Show/hide divs when radio button selection

Question

I have this piece of code which shows me a div defined in data-target attribute after I select radio button (by clicking on a label to be specific), but what I need is that when I choose to change the choice, the other div needs to disappear.. I've tried many things but none of them have worked.. Thanks a lot

When I click on radio Ano1 - div f4 appears and q2 disappears When I click on radio Ne1 - div f4 disappears and q2 appears..

And it goes the same way on another div (as you can see)..

$(document).ready(function() {
  $('[data-target]').click(function() {
    // $('.none').hide();
    if ($(this).is(':hover')) {
      var target = $(this).attr('data-target');
      $(target).show(1000);

    }
  });
});

// `$('.none').hide();` is in comment because I want to see the choices..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q1" class="none">

  <h3>Žádáte o nové číslo?</h3>
  <input type="radio" name="novecislo" value="Ano1" id="Ano1"><label for="Ano1" data-target="#f4">Ano</label> <br>
  <input type="radio" name="novecislo" value="Ne1" id="Ne1"><label for="Ne1" data-target="#q2">Ne</label>

</div>
<div id="q2" class="none">

  <h3>Chcete převést číslo v rámci operátora T-mobile?</h3>
  <input type="radio" name="op" id="Ano2"><label for="Ano2" data-target="#q3">Ano</label> <br>
  <input type="radio" name="op" id="Ne2"><label for="Ne2" data-target="#f1,#f4">Ne</label> <br>


</div>
<div id="f4" class="none">
  <h4>Jaký tarif chcete zvolit?</h4>
  <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br>
  <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br>
  <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br>
  <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br>
  <h4>Co chcete aktivovat?</h4>
  <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br>
  <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label>
  <p></p>

  <input type="button" name="send" value="ODESLAT" onclick="vypisForm();">

</div>

have different classes than just `none` (very poor name), then hide the class you gave to the div4 - please add CSS to the snippet I made — mplungjan, Jul 10 '17 at 11:53
Yes, but you need one for the radios and another for div4 - I would not use none, since it is an actual variable name in css — mplungjan, Jul 10 '17 at 12:12

score 0 · Answer 1 · answered Jul 10 '17 at 11:54

0

You can do one simple trick: Hide all divs which have class none before you make any one visible. Like this:

 $(document).ready(function() {
  $('[data-target]').click(function() {
    // $('.none').hide();
    if ($(this).is(':hover')) {
      $('.none').hide();
      var target = $(this).attr('data-target');
      $(target).show(1000);

    }
  });
});

answered Jul 10 '17 at 11:54

Himanshu Upadhyay

6,558
1
20
33

but that will hide any other divs right? that´s not what I want.. I need choices to be visible.. – Tomáš Vítů Jul 10 '17 at 12:12
The line I have added will hide all divs with none class. These two lines `var target = $(this).attr('data-target'); $(target).show(1000);` will make your chosen divs visible. – Himanshu Upadhyay Jul 10 '17 at 12:19

score 0 · Accepted Answer · answered Jul 10 '17 at 11:58

try this one

$(document).ready(function() {
  $("input:radio[name='novecislo']").change(function() {
    var val = $(this).val();
    if (val == 'Ano1') {
      $('#f4').show();
      $('#q2').hide();
    } else {
      $('#f4').hide();
      $('#q2').show();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q1" class="none">

  <h3>Žádáte o nové číslo?</h3>
  <input type="radio" name="novecislo" value="Ano1" id="Ano1"><label for="Ano1" data-target="#f4">Ano</label> <br>
  <input type="radio" name="novecislo" value="Ne1" id="Ne1"><label for="Ne1" data-target="#q2">Ne</label>

</div>
<div id="q2" class="none">

  <h3>Chcete převést číslo v rámci operátora T-mobile?</h3>
  <input type="radio" name="op" id="Ano2"><label for="Ano2" data-target="#q3">Ano</label> <br>
  <input type="radio" name="op" id="Ne2"><label for="Ne2" data-target="#f1,#f4">Ne</label> <br>


</div>
<div id="f4" class="none">
  <h4>Jaký tarif chcete zvolit?</h4>
  <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br>
  <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br>
  <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br>
  <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br>
  <h4>Co chcete aktivovat?</h4>
  <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br>
  <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label>
  <p></p>

  <input type="button" name="send" value="ODESLAT" onclick="vypisForm();">

</div>

score 0 · Answer 3 · answered Jul 10 '17 at 12:18

Move the data-target attribute to the radio Also you cannot click and hover at the same time

$(function() {
  $('[data-target]').on("click", function() {
    var target = $(this).attr('data-target');
    console.log(target)
    $(target).show(1000);
  });
});

#f4 {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q1" class="none">

  <h3>Žádáte o nové číslo?</h3>
  <input type="radio" name="novecislo" value="Ano1" data-target="#f4" id="Ano1"><label for="Ano1">Ano</label> <br>
  <input type="radio" name="novecislo" value="Ne1" data-target="#q2" id="Ne1"><label for="Ne1">Ne</label>

</div>
<div id="q2" class="none">

  <h3>Chcete převést číslo v rámci operátora T-mobile?</h3>
  <input type="radio" name="op" data-target="#q3" id="Ano2"><label for="Ano2">Ano</label> <br>
  <input type="radio" name="op" data-target="#f1,#f4" id="Ne2"><label for="Ne2">Ne</label> <br>


</div>
<div id="f4" class="none">
  <h4>Jaký tarif chcete zvolit?</h4>
  <input type="radio" name="tarif" value="tarif1" id="t1"><label for="t1" title="15Kč | bez dat | volání a sms 0,29/min">Profi na míru 1</label> <br>
  <input type="radio" name="tarif" value="tarif2" id="t2"><label for="t2" title="190Kč | 1,5GB | volání a sms zdarma">Profi na míru 2</label> <br>
  <input type="radio" name="tarif" value="tarif3" id="t3"><label for="t3" title="229Kč | 5GB | volání a sms zdarma">Profi na míru 3</label> <br>
  <input type="radio" name="tarif" value="tarif5" id="t5"><label for="t5" title="149Kč | bez dat | volání a sms zdarma">Profi na míru 5</label> <br>
  <h4>Co chcete aktivovat?</h4>
  <input type="checkbox" name="akt" value="roaming" id="cc1"><label for="cc1">Roaming</label> <br>
  <input type="checkbox" name="akt" value="platby" id="cc2"><label for="cc2">Platby</label>
  <p></p>

  <input type="button" name="send" value="ODESLAT" onclick="vypisForm();">

</div>

score -1 · Answer 4 · answered Jul 10 '17 at 12:00

-1

First of all: use .on('click', function(){}) instead .click()

Here's why: Difference between .on('click') vs .click()

answered Jul 10 '17 at 12:00

pkolawa

653
6
17

Show/hide divs when radio button selection

4 Answers4