CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bennyblanco
bennyblanco

Reputation: 13

How can I hide and show multiple divs based on a certain div class base using Javascript?

As you guys see here, I want to be able to hide and show the Birthday and Anniversary boxes based on the answer you give in the dropdown.

I'm not able to hide Birthday cars when I select anniversary, it only works for one box only despite adding the same id to the group of divs. I've also tried putting on the same class but it still didn't work. Any help is much appreciated !

$("#kindofgreeting").change(function() {

if ($(this).val() == "Birthday") {

$('#ann').hide();
$('#bday').show();
  } 
enter code here
$('#bday').hide();
$('#ann').show();
}
});

$("#kindofgreeting").trigger("change");

https://codepen.io/bennyblanco4/pen/rNBLPrrI

Upvotes: 0

Views: 40

Answers (1)

Yersskit
Yersskit

Reputation: 56

your pen link is not working but i think i can help you.

$("#kindofgreeting").change(function () {

    if ($(this).val() == "Birthday") {
        $('#ann').hide();
        $('#bday').show();
    } else if ($(this).val() == "Anniversary") {
        //enter code here
        $('#bday').hide();
        $('#ann').show();
    }
});

$("#kindofgreeting").trigger("change");

i think you forget the else statement, and if you want to validate two different values then, you need to put an else if with the confition you need.

hope this help, english provided by google.

Upvotes: 2

Related Questions