Hide other divs when using jQuery toggle

Question

I have three buttons - each one has a .toggleClass() that shows/hides a different element. This is working as intended: when I toggle the buttons on and off, their respective divs show and hide.

So that's great, and here is a minimal, simplified version of the code for you to see what I have achieved so far:

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-weapons').toggleClass("z-shown");
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-armors').toggleClass("z-shown");
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-miscs').toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>

However, what I am trying to do now, and what I'm struggling with, is how to hide the two other elements when I have just toggled one of the elements.

For example I toggle 'Armor' on, and then when I toggle 'Weapons' next, 'Armor' should disappear. Ad infinitum no matter what toggle I use.

I have tried using if/else statements in combination with addClass()/removeClass() and show()/hide() but to no avail. I think my logic is wrong, because enough clicking stops them from appearing at all:

    if ($('.z-weapons').hasClass("z-shown")) {
        $('.z-armors').toggleClass("z-shown");
        $('.z-miscs').toggleClass("z-shown");
    }
else if ($('.z-armors').hasClass("z-shown")) {
            $('.z-weapons').toggleClass("z-shown");
            $('.z-miscs').toggleClass("z-shown");
    }
else if ($('.z-miscs').hasClass("z-shown")) {
            $('.z-weapons').toggleClass("z-shown");
            $('.z-armors').toggleClass("z-shown");
    }

So yeah, I'm kind of stuck here now. Does anyone have a solution? I'd like the other two elements to be hidden when I'm viewing one of them.

Answer 1

First i would advise you to use only 1 event handler. The behaviour of your elements on a click is always the same. Otherwise your code gets messy quite quickly. You would need to change all 3 event handlers now in order to implement the second part of your code.

To do that you need a new class either on all buttons or on a common parent. And you need to save the target of your button in a data attribute:

// all buttons that are children of the element .toggle-buttons get the event handler attached
$('.toggle-buttons > button').on('click', function() {
  // get the target that should get toggled
    let target = $(this).data('target');
  // remove the class from all elements that are not the current target
  $('.z-shown').not( target ).removeClass('z-shown');
  // toggle the class on the target
    $(target).toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-group toggle-buttons">
  <button class="z-btn-armors" data-target=".z-armors">Armor</button>
  <button class="z-btn-weapons" data-target=".z-weapons">Weapons</button>
  <button class="z-btn-miscs" data-target=".z-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>

Answer 2

One option, which also makes this expandable (so you can add more "types" in the future without too much code) is to give all the different "types" an additional class so you can refer to them all at once

<div class="z-items z-armors"></div>
<div class="z-items z-weapons"></div>

then to hide them all

$(".z-items").hide();

or, in your case, remove the .z-shown class, excluding the one you want to show (keeping your toggle functionality)

$(".z-items").not(".z-armors").removeClass("z-shown");

Updated snippet:

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-items').not(".z-weapons").removeClass("z-shown");
    $('.z-weapons').toggleClass("z-shown");
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-items').not(".z-armors").removeClass("z-shown");
    $('.z-armors').toggleClass("z-shown");
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-items').not(".z-miscs").removeClass("z-shown");
    $('.z-miscs').toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-items z-armors">
    Armor blablabla
</div>

<div class="z-items z-weapons">
    Weapons blablabla
</div>

<div class="z-items z-miscs">
  Miscellaneous blablabla
</div>

---

To reduce the code further, put the target classes on the buttons. This also means adding new "types" in the future will not require any code changes as it's data-driven.

$(".z-btn").on('click', function(e) {
  var target = "." + $(this).data("target");
    $('.z-items').not(target).removeClass("z-shown");
    $(target).toggleClass("z-shown");
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
     <button class="z-btn" data-target="z-armors">Armor</button>
     <button class="z-btn" data-target="z-weapons">Weapons</button>
     <button class="z-btn" data-target="z-miscs">Misc</button>
</div>
  
<div class="z-items z-armors">
    Armor blablabla
</div>

<div class="z-items z-weapons">
    Weapons blablabla
</div>

<div class="z-items z-miscs">
  Miscellaneous blablabla
</div>

Answer 3

You can use removeClass():

// Toggles for filter groups

$('.z-btn-weapons').on('click', function(e) {
    $('.z-weapons').toggleClass("z-shown");
    $('.z-armors, .z-miscs').removeClass('z-shown');
});

$('.z-btn-armors').on('click', function(e) {
    $('.z-armors').toggleClass("z-shown");
    $('.z-weapons, .z-miscs').removeClass('z-shown');
});

$('.z-btn-miscs').on('click', function(e) {
    $('.z-miscs').toggleClass("z-shown");
    $('.z-weapons, .z-armors').removeClass('z-shown');
});

.z-weapons, .z-armors, .z-miscs{
    display: none;
}

.z-shown {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="button-group">
         <button class="z-btn-armors">Armor</button>
         <button class="z-btn-weapons">Weapons</button>
         <button class="z-btn-miscs">Misc</button>
</div>
  
<div class="z-armors">
    Armor blablabla
</div>

<div class="z-weapons">
    Weapons blablabla
</div>

<div class="z-miscs">
  Miscellaneous blablabla
</div>