Question 288780 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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();
});
    Login or Signup to reply.
  2. 0 
    function hideshow(sel) {
  document.querySelectorAll(sel).forEach(x=>{
   [x.style.display,x.dataset.display] = [x.dataset.display??"none",x.style.display??""]
  });
}
    <button class="navbarBTN" onclick="hideshow('.myDIV')">
      <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">ninja</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;">pen</i><i class="fa-solid fa-angle-up" style="color: #424242; margin-right: 
      0.5em;">up</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>

    The above script will toggle the contents of .style.display with .dataset.display for each element matching the class selector. This will happen, whenever the hideshow() function is called. The ?? operator sets intelligent "default" values for the attributes, in case they have not been defined previously. In this way you can use the snippet in a wide variety of contexts, regardless of the initial .style.display values your elements might have.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search