How can I make a function to show/hide div elements, while targeting multiple elements?

Question

I am a beginner and I was copying LinkedIn's layout design as a practice project. I need a function to show or hide menus when clicking on a button.

I managed to do it initially by copying the example on W3SCHOOL,but then I tried to apply the same logic to a different button and div, and it did not work. I tried to rewrite it a little bit to work with multiple variables but I couldn't do it on my own.

Here is the code :

<button class="navbarBTN"onclick="hideshow()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" class="mercado-match" width="24" height="24" focusable="false">
            <path d="M3 3h4v4H3zm7 4h4V3h-4zm7-4v4h4V3zM3 14h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4zM3 21h4v-4H3zm7 0h4v-4h-4zm7 0h4v-4h-4z"></path>
          </svg></button>
          <div class="myDIV" class="flex-column bg-light rounded-3" style="position: absolute;  width: 180px; font-size: smaller; margin-top: 2.5%;">
            <div class="d-flex flex-column">
              <ul style="margin: 0; padding: 6px; border-color:#666666; border-bottom: 2px solid;">
                <p class="m-0">Costin Velicu</p>
                <p class="fw-light">Looking for work</p>
                <button type="button" class="btn btn-outline-primary rounded-5" style="width: 100%; height: 30px;"><p style="font-size: smaller;">View profile</p></button>
              </ul>
</div>   

<script>
function hideshow() {
  var x = document.getElementsByClassName("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

This one works. Essentially after I press the button the div switches display mode from block to none.

<button class="navbarBTN"onclick="hideshow()">
          <div class="d-flex sticky-bottom bg-light" style="width: fit-content; left: 80%; position: relative;">
            <i class="fa-solid fa-user-ninja" style="color: #424242; font-size: larger; margin-right: 0.5em; padding: 2px"></i>
          <p style="margin-right: 10em;">Messaging</p>
          <div class="justify-content-between"><i class="fa-solid fa-ellipsis" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-pen-to-square" style="color: #424242; margin-right: 0.5em;"></i><i class="fa-solid fa-angle-up" style="color: #424242; margin-right: 
          0.5em;"></i></div></div></button>
        <div class="myDIV" style="display: flex; flex-direction: column-reverse; position: relative; left: 80%;">
         <div class="container d-flex flex-column bg-light-subtle" style="width: 350px; position: absolute;">
          <form class="d-flex">
            <input class="form-control me-1" type="search" placeholder="Search..." aria-label="Search">
            </form>
<script>
function hideshow() {
  var x = document.getElementsByClassName("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>  

This one doesn't work.

Answer 1

You need to iterate over the collection that getElementsByClassName() returns:

HTML:

<button onclick="showHide()">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>

JavaScript:

function showHide() {
    // Get a collection of elements with the class "show-hide"
    const elements = document.getElementsByClassName("show-hide");

    // Iterate over the collection
    for (let i = 0; i < elements.length; i++) {
        // Set the current element
        const current_element = elements[i];
        // Check current display of the current element
        if (current_element.style.display === "none") {
            // If the current element is hidden, display it
            current_element.style.display = "block";
        } else {
            // If the current element is shown, hide it
            current_element.style.display = "none";
        }
    }
}

Alternatively, if you can or are using JQuery, it's much easier to do:

HTML:

<button class="btn-main" type="button" id="toggle-elements">Show/Hide</button>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>
<div class="show-hide">My Element</div>

JavaScript w/ JQuery:

// When the hide/show button is clicked
$("#toggle-elements").on("click", () => {
    $(".show-hide").toggle();
});