javascript - Hide div info on click

I have a list of products in a slider broken into 3 categories. When you click on a product, the product description appears. When you click on a new product, the old product description hides and the new product description appears.

My problem is when you change the categories I want the previous description to close and so that no descriptions are shown until you click a new product. Currently the product description is still showing of the last product from the last category until a new product is clicked.

I tried to write the javascript for this portion but failed. Can anyone help?

The javascript (the first 10 lines are the working code):

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";
  }
}

var anav = document.querySelector('#navsliderselector');
var divprod = document.querySelector('.hidden');
button.addEventListener('click', function (event) {
      if (menu.style.display == "") {
          menu.style.display = "none";

      } else {
          menu.style.display = "";

      }
    }
  );

Here's the HTML:

<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>

              <ul>
                <li><button onclick="product(product6info)"><h4>Back Brace L0650</h4></button></li>
              </ul>
               <ul>
                <li><button onclick="product(product7info)"><h4>Back Brace L0650</h4></button></li>
              </ul>

    <nav>
                <a href="#" id="navsliderselector">Braces</a>
                <a href="#" id="navsliderselector">Mobility</a>
                <a href="#" id="navsliderselector">Incontinence</a>
              </nav>

              <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>

Solution

I believe you are writing the product function for all your onclicks wrong.

You write all your onclick functions with the number included in the function name:

<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>

Based on your given code there are no other product functions with numbers with them so that is the problem.

Since your product function takes a parameter x and modifies the display of it, I think you should be passing in the element itself into the parameter

so instead of this:

<li><button onclick="product1()"><h4>Knee Brace L1843</h4></button></li>

you should write this:

<li><button onclick="product(this)"><h4>Knee Brace L1843</h4></button></li>

EDIT:

Sorry, I seem to have misunderstood the question. If your purpose was to clear all product descriptions every time the client chooses a new product category then:

You can simply create a new onclick function that clears all descriptions(I'm going to use the implementation you did for your product function):

function clearAllDescriptions(){
  document.querySelectorAll('.hidden').forEach(function(el){
    el.style.display = "none";
  });
}

and then assign it to the navigation categories:

<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Braces</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Mobility</a>
<a href="#" onclick="clearAllDescriptions()" id="navsliderselector">Incontinence</a>