选择单选按钮时显示/隐藏div

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> 

Answer 1

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

    }
  });
});

Answer 2

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> 

Answer 3

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> 

Answer 4

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

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