Hide and Show a div when a tab is active ( selected )

Question

I have this tabs built.

When I click on Round Trip, I want to make disappear that Flight 2 form.

But since that is needed on multi-city, I want it to show back on

multi-city.

I used this

jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");  
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");  

jQuery('.ret_date_block').attr("id","noreturndate");    


   $("#noreturndate").hide();
$(".onewaybuttonchecked").on("click", function(){
    $("#noreturndate").hide();
});

      $(".roundwaybuttonchecked").on("click", function(){
    $("#noreturndate").show();
});

          $(".multiwaybuttonchecked").on("click", function(){
    $("#noreturndate").show();
});

});

I used this to hide something on the One Way tab. If:

$(".roundwaybuttonchecked").on("click", function(){
    $("#noreturndate").show();
});

If I use here the correct id of Flights 2 to hide it on the Round-Trip, it does its job but when I switch between One-Way and Round-Trip it shows nothing. This line get's in action when I go from Multi City to Round-Trip.

Any ideas?

Answer 1

You definitely need a conditional in here.

In your JQuery function, try something like this:

function radioButton() {
if (document.getElementById('htmlElement1').checked) {
    document.getElementById('htmlElement2').style.visibility = 'visible';
} else {
    document.getElementById('htmlElement').style.visibility = 'hidden';
}

Please note that since I cannot view your HTML - I am not sure what elements you are using so where i say htmlElement 1 (or 2) please fill that in with the appropriate elements.

Let me know you results!

Answer 2

Never mind.

I used same code as above

jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");  
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");  

jQuery('.pnlFlight2').attr("id","pnlFlight2");  


   $("#pnlFlight2").hide();
$(".onewaybuttonchecked").on("click", function(){
    $("#pnlFlight2").hide();
});

      $(".roundwaybuttonchecked").on("click", function(){
    $("#pnlFlight2").hide();
});

          $(".multiwaybuttonchecked").on("click", function(){
    $("#pnlFlight2").show();
});

and it did the trick, I don't know why it didn't work earlier but glad it did now.