Jump to content

StMartinsIsland

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by StMartinsIsland

    Hide/show Multiple Divs with same function

    in JavaScript

    Posted

    I read, with great interest, about using a button to show and hide text here.  However, I have several blocks of text for which I would like a button to toggle show/hide but would prefer not to duplicate the same function several times.  I would like to pass the div ID as a parameter so that multiple buttons may use the same function to show/hide the text associated with each button.  I tried the following code but it does not work.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    </style>
    </head>
    <body>

    <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

    <button onclick="myFunction('myDIV')">Try it</button>

    <div id="myDIV">
    This is my DIV element.
    </div>

    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

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

    </body>
    </html>

     

×
×
  • Create New...