切换多个div

Question

Suppose I created 7 anchor tags. I named them ABOUT, STAFF, VOLUNTEER, FINANCE, SPONSORS, SUBMIT FILM and WINNERS. Also, suppose that I created 7 containing content like text and images. By default, I hid all 7 . Only the anchor tags are showing one after the other like below:

[one] [two] [three] [four] [five] [six] [seven]

All anchor tags are lined up horizontally next to one another with white backgrounds, framed in black, 1 pixel wide and the font also in black, using CSS called "sub-menu." Easy. No problem.

Suppose that I gave each a distinct ID (eg, id="aboutsec", id="staffsec", id="volunteersec", etc.)?

Using snippets of JavaScript found online, I managed to show my hidden and hide them when the same anchor tag is clicked. For example, when I click on the anchor tag titled "About" it shows , and when I click on the exact same anchor, it hides it.

That part was easy.

However, suppose that when I click anchor About, showing I want to hide when I click on anchor Staff or Volunteer or Finance or Sponsors, etc? In other words, a toggle?

What I am trying to achieve is that when any of the anchors are clicked, showing its corresponding , when a different anchor is clicked, I want it to hide the others, which ever is currently showing. Make sense?

These are the anchor tags that I am currently using:

    <a href="javascript:void()" class="sub-menu" 
    onclick="showme()">About</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme2()">Staff</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme3()">Volunteer</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme4()">Finance</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme5()">Sponsors</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme6()">Submit Film</a>
    <a href="javascript:void()" class="sub-menu" 
    onclick="showme7()">Winners</a>

The are titled using IDs:

    <section id="aboutsec" class="subsec" style="display:none">

I have an image at the bottom of each that is wrapped inside an anchor tag that uses the same onclick function that effectively hides the that is showing. This part works just fine. So, what I have is an show/hide situation. Great, but what if someone clicks on "Staff" or "Volunteer" or any other anchor? It shows another but does not hide the open ones.

This is the JS that I am using, and I've had to repeat each to show and hide each :

    <!--Show and hide sub-section About-->
    <script>
    function showme() {
    var x = document.getElementById("aboutsec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

    <!--Show and hide sub-section Staff-->
    <script>
    function showme2() {
    var x = document.getElementById("staffsec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

    <!--Show and hide sub-section Volunteer-->
    <script>
    function showme3() {
    var x = document.getElementById("volunteersec");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>

Answer 1

You can use anchor tags using href as id:

    <a href="#aboutsec" class="sub-menu" 
    onclick="showme(this)">About</a>
    <a href="#staffsec" class="sub-menu" 
    onclick="showme(this)">Staff</a>

Then use it to get the actual element needed:

    <script>
    function showme(tag) {
      var x = document.querySelector(tag.href);
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>