javascript - show/hide reset on new click

Question

I have a list of products that when you click on the item, the info of the product will show. I have the show/hide working but where I'm having trouble is what I need to add into the javascript to hide the last item details when a new item is clicked. Currently the item information will show the newly clicked on info plus the info of the last item clicked.

HTML

<ul>
        <li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>
        <li><button onclick="product2()"><h4>Wrist Brace L3807</h4></button></li>
        <li><button onclick="product3()"><h4>Wrist Brace</h4></button></li>
        <li><button onclick="product4()"><h4>Ankle Brace L1005</h4></button></li>
        <li><button onclick="product5()"><h4>Back Brace L0650</h4></button></li>
      </ul>

      <div id="product1info" class="hidden">
            <h2>Knee Brace L1843</h2>
            <p>Product Info</p>
        </div>

        <div id="product2info" class="hidden">
            <h2>Wrist Brace L3807</h2>
            <p>Product Info</p>
        </div>

        <div id="product3info" class="hidden">
            <h2>Wrist Brace</h2>
            <p>Product Info</p>
        </div>

        <div id="product4info" class="hidden">
            <h2>Ankle Brace L1005</h2>
            <p>Product Info</p>
        </div>

        <div id="product5info" class="hidden">
            <h2>Back Brace L0650</h2>
            <p>Product Info</p>
        </div>

JavaScript

function product1() {
    var x = document.getElementById("product1info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product2() {
    var x = document.getElementById("product2info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";

    }
}

function product3() {
    var x = document.getElementById("product3info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product4() {
    var x = document.getElementById("product4info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

function product5() {
    var x = document.getElementById("product5info");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

Answer 1

I think initially all the products should be invisible. You do not need multiple functions. Just pass corresponding id to the function call. In the function set all the products display property to none first, then show hide only the targeted product:

function product(x) {
  document.querySelectorAll('.hidden').forEach(function(el){
    el.style.display = "none";
  });
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

.hidden{
  display: none;
}

<ul>
  <li><button onclick="product(product1info)"><h4>Knee Brace L1843</h4></button></li>
  <li><button onclick="product(product2info)"><h4>Wrist Brace L3807</h4></button></li>
  <li><button onclick="product(product3info)"><h4>Wrist Brace</h4></button></li>
  <li><button onclick="product(product4info)"><h4>Ankle Brace L1005</h4></button></li>
  <li><button onclick="product(product5info)"><h4>Back Brace L0650</h4></button></li>
</ul>

<div id="product1info" class="hidden">
  <h2>Knee Brace L1843</h2>
  <p>Product Info</p>
</div>

<div id="product2info" class="hidden">
  <h2>Wrist Brace L3807</h2>
  <p>Product Info</p>
</div>

<div id="product3info" class="hidden">
  <h2>Wrist Brace</h2>
  <p>Product Info</p>
</div>

<div id="product4info" class="hidden">
  <h2>Ankle Brace L1005</h2>
  <p>Product Info</p>
</div>

<div id="product5info" class="hidden">
  <h2>Back Brace L0650</h2>
  <p>Product Info</p>
</div>