This is hard to explain precisely. But here we go: I have a button that calls a function

<button onclick="myFunction_gsm()">Men</button>

When the button is pressed, it triggers a script. This script grabs a hidden section and displays it. The script goes like this:

    <script>
//Gender Selection Script Men//
    function myFunction_gsm() {
  var x = document.getElementById("men-sizing");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }

}
</script>

On the screen this plays out so that you click the button, a section appears, if I click the same button again the section hides again. However, I have another 2 sections. 3 Sections in total. For this example, the above script works for 1 section, the A section. There is also B and C. I would like to include the behavior that when A has been pressed, therefore displaying section A, if I then press the button for B the B section appears but the A section disappears without having to press the A button again. A Dynamic change of sorts.

I am a complete starter for coding but I assume it's something you add into the if statement. Any help would be greatly appreciated.

I would prefer solutions that incorporate the code I have now, since I won't have much use recreating it from scratch. It would solve this, but cause many new problems.

CodePudding user response：

You might use class names for the sections. Then at the start of the function have all elements with that class name be hidden and afterwards display the currently clicked one. If you want to preserve the toggle functionality for the section (so clicking A twice displays and hides it again), you want to check the display state of the currently clicked one first before hiding all. And then only display the clicked one if it was hidden before.

CodePudding user response：

Define a class for all sections, for example sec. On click event pass the selected id, hide all of them and just toggle the selected one.

function myFunction_gsm(sectionId) {
  let sec = document.querySelectorAll('.sec');
  sec.forEach(itm => {
    if(itm.id !== sectionId) itm.style.display = 'none'
  })
  var x = document.getElementById(sectionId);
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

let sec = document.querySelectorAll('.sec');
sec.forEach(itm => {
  itm.style.display = 'none'
})

<button onclick="myFunction_gsm('sec1')">Sec1</button>
<button onclick="myFunction_gsm('sec2')">Sec2</button>
<button onclick="myFunction_gsm('sec3')">Sec3</button>

<div class="sec" id="sec1"> some text 1 here</div>
<div class="sec" id="sec2"> some text 2 here</div>
<div class="sec" id="sec3"> some text 3 here</div>

CodePudding user response：

The modern approach is to avoid using .style within JS. This add the stylign as inline-style which ahs the highest specificty weight with exeption of important. The modern solution is to use classList to apply, remove or toggle a CSS-Class.

1. You add a class to CSS to hide element such as: .display-none { display: none; }`
2. Then you add a function to your button to hide all sections with a certain class by adding the class mentioned at step 1: function hideAll() { document.querySelectorAll('.class-name').forEach(el => el.classList.add('display-none')); }
3. You add a second function to the onclick trigger of a button thow a certain element by removing the class: element.classList.remove('display-none');

function hideAll() {
  document.querySelectorAll('.section').forEach(el => el.classList.add('display-none'));
}

function showA() {
  document.querySelector('#section-a').classList.remove('display-none');
}

function showB() {
  document.querySelector('#section-b').classList.remove('display-none');
}

function showC() {
  document.querySelector('#section-c').classList.remove('display-none');
}

.display-none {
  display: none;
}

<button onclick="hideAll(); showA()">Show A</button>
<button onclick="hideAll(); showB()">Show B</button>
<button onclick="hideAll(); showC()">Show C</button>

<section id="section-a" class="section display-none">Section A</section>
<section id="section-b" class="section display-none">Section B</section>
<section id="section-c" class="section display-none">Section C</section>

CSS-only Solution

If you dont want to sue scripts, you could use a pure CSS-Method that works through the :target selector. This allows you to use anchor as "trigger".

1. Hide the scetiond with display: none; either by selecting them directly or adding a class to them.
2. use an anchor with an href="#id" instead of a link. This will move the page to that element but also manipulate the websites adress.
3. Use *:target { display: block; } to show targeted elements:

.display-none {
  display: none;
}

*:target {
  display: block;
}


/* for styling purpose only */
a {
  margin-right: 15px;
}

<a href="#section-a">Show A</a>
<a href="#section-b">Show B</a>
<a href="#section-c">Show C</a>

<section id="section-a" class="display-none">Section A</section>
<section id="section-b" class="display-none">Section B</section>
<section id="section-c" class="display-none">Section C</section>