I have a question about show/hide function

Question

I have a question about show/hide function with divs that have multiple classes

So I have 4 buttons and 4 classes, and I know how to show/hide divs that have only one class...

<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>

However, if div has multiple classes:

<div class="class1 class2"></div>

following script doesn't work..

<script>
$(document).ready(function(){
$("#button1").click(function(){
$(".class1").show();
$(".class2").hide();
$(".class3").hide();
$(".class4").hide();
});
$("#button1").click(function(){
$(".class1").hide();
$(".class2").show();
$(".class3").hide();
$(".class4").hide();
});
$("#button3").click(function(){
$(".class1").hide();
$(".class2").hide();
$(".class3").show();
$(".class4").hide();
});
$("#button4").click(function(){
$(".class1").hide();
$(".class2").hide();
$(".class3").hide();
$(".class4").show();
});
</script>

Also, can I write it somehow that I don't have to write every div that I want to hide?

.hasClass show()
else hide()

Because in the future I might have 20 classes or more...

Sorry I am beginner:)

Answer 1

It is because you the show first and then hide . In order for it to work, you should hide all class name selectors and then do a .show for the relevant class selector.

A cleaner approach would be create a hideAll method and then .show for the relevant class selector.

Answer 2

it think it's every think work ok but you have a syntax error in last and that who stop everything

$(document).ready(function(){
    $("#button1").click(function(){
    $(".class1").show();
    $(".class2").hide();
    $(".class3").hide();
    $(".class4").hide();
    });
    $("#button2").click(function(){
    $(".class1").hide();
    $(".class2").show();
    $(".class3").hide();
    $(".class4").hide();
    });
    $("#button3").click(function(){
    $(".class1").hide();
    $(".class2").hide();
    $(".class3").show();
    $(".class4").hide();
    });
    $("#button4").click(function(){
    $(".class1").hide();
    $(".class2").hide();
    $(".class3").hide();
    $(".class4").show();
    })
    
});

Answer 3

I got the answer!

Hide all divs first and then show what you want!

Like this, divs can have multiple classes!

<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<div class="class1 class2"></div>
<div class="class3 class4"></div>
<div class="class1 class2 class3 class4"></div>

<script>
$(document).ready(function(){
$("#button1").click(function(){
$("div").hide();
$(".class1").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class2").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class3").show();
});
$("#button1").click(function(){
$("div").hide();
$(".class4").show();
});
</script>

Thanks to everybody!