How to have only 1 div on 'display: flex' at a time

Question

Hello wizards of the internet!
Im new to javascript and finally found an efficient way to loop through ID's and toggle them. The code below adds the button id + "-box" text to show the result as 'display: flex'. If the ID is already visible it will set it to 'display: none'. For the future I need to add a lot of different smartphones to a website. I need an efficient way to only display 1 box at a time . I tried many different things but they all end in a huge document full of double code :(

( the style in html is to prevent the javascript double-click bug )

        <!-- Smartphone Brands -->
        <div id="brand-box" class="brand-container">
            <button id="apple" class="brand" type="button" onclick="showBrand(this.id)">Apple</button>
            <button id="samsung" class="brand" type="button" onclick="showBrand(this.id)">Samsung</button>
            <button id="huawei" class="brand" type="button" onclick="showBrand(this.id)">Huawei</button>
        </div>

        <!-- Apple Smartphones -->
        <div id="apple-box" class="block-container" style="display:none;">
            <button id="apple1" class="block">iPhone 1</button>
            <button id="apple2" class="block">iPhone 2</button>
            <button id="apple3" class="block">iPhone 3</button>
        </div>

        <!-- Samsung Smartphones -->
        <div id="samsung-box" class="block-container" style="display:none;">
            <button id="samsung1" class="block">Samsung 1</button>
            <button id="samsung2" class="block">Samsung 2</button>
            <button id="samsung3" class="block">Samsung 3</button>
        </div>

        <!-- Huawei Smartphones -->
        <div id="huawei-box" class="block-container" style="display:none;">
            <button id="huawei1" class="block">Huawei 1</button>
            <button id="huawei2" class="block">Huawei 2</button>
            <button id="huawei3" class="block">Huawei 3</button>
        </div>

function showBrand(clicked_id) {
    var brand = document.getElementById(clicked_id+'-box');

    if (brand.style.display == "none") {
      brand.style.display = "flex";
    }
    else {
      brand.style.display = "none";
    }
}

Answer 1

One possible approach is modifying your function so that, when button is clicked, it...

1. memorizes the current visibility status of the target brand
2. hides all the brands
3. chooses a new value for the target brand depending on the old one

Like this:

function toggleBrand(clicked_id) {
  var brand = document.getElementById(clicked_id+'-box');
  var wasVisible = brand.style.display === 'flex';

  var allBrands = document.querySelectorAll('[id$="-box"]');
  allBrands.forEach(el => el.style.display = 'none');

  brand.style.display = wasVisible ? 'none' : 'flex';
}

Now, while using attribute 'tail' selector is kinda neat, I'd recommend applying the same class or data attribute to all of those containers, and using according selector to collect them.

And yes, the renaming (showBrand => toggleBrand) was intentional: your original function actually toggles the brand, didn't show them. If you want instead to always show the brands on click, just drop that wasVisible check and always assign 'flex' as new value to brand.style.display.