Automatically hiding divs when clicked using HTML and CSS

Question

Automatically hiding divs when clicked using HTML and CSS

Apologies if this question has been asked before, but I have two onclick divs and I'm trying to achieve a specific behavior. When I open the first one, I want it to automatically close when I open the second one, and vice versa.

Below is the HTML code snippet:


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

            function myFunction2() {
                var x = document.getElementById("myDIV2");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";                  
                }
            }


            #myDIV {
                position: relative;
                width: 100%;
                padding: 50px 0;
                text-align: center;
                background-color: lightblue;
                top: 150px;
            }

            .button1 {
                position: relative;
                top: 120px
            }
  
            #myDIV2 {
                position: relative;
                width: 100%;
                padding: 50px 0;
                text-align: center;
                background-color: lightblue;
            }

            .button2 {
                position: relative;
            }

 
            <button class="button1" onclick="myFunction()">Try it</button>

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

            <button class="button2" onclick="myFunction2()">Try it2</button>

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

DEMO: https://codepen.io/pen/NWrZBRX

javascript html css

Answer 1

Answer №1

To achieve the desired functionality, it is important to include both div elements in both functions. By doing so, you can then choose which one to hide and which one to show. Consolidating both actions into a single function simplifies the process as it essentially reverses the previous action taken. Additionally, ensuring that the button remains visible on top of the div container can be achieved by setting its z-index property to 1, preventing it from being hidden underneath the divs at times.

(you can implement these changes within your existing code as shown below)

  #myDIV {
    position: relative;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    top: 150px;
  }

  .button1 {
    position: relative;
    top: 120px
    z-index:1;
  }
  
  #myDIV2 {
    position: relative;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
  }

  .button2 {
    position: relative;
  }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            test
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="legStyle.css">
    </head>
    <body>
        <button class="button1" onclick="myFunction()">Try it</button>
        <div id="myDIV">
            This is my DIV element.
        </div>
        <div id="myDIV2">
            This is my second DIV element.
        </div>

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

    </body>
</html>

Answer 2

To achieve the desired functionality, it is important to include both div elements in both functions. By doing so, you can then choose which one to hide and which one to show. Consolidating both actions into a single function simplifies the process as it essentially reverses the previous action taken. Additionally, ensuring that the button remains visible on top of the div container can be achieved by setting its z-index property to 1, preventing it from being hidden underneath the divs at times.

(you can implement these changes within your existing code as shown below)

  #myDIV {
    position: relative;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    top: 150px;
  }

  .button1 {
    position: relative;
    top: 120px
    z-index:1;
  }
  
  #myDIV2 {
    position: relative;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
  }

  .button2 {
    position: relative;
  }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            test
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="legStyle.css">
    </head>
    <body>
        <button class="button1" onclick="myFunction()">Try it</button>
        <div id="myDIV">
            This is my DIV element.
        </div>
        <div id="myDIV2">
            This is my second DIV element.
        </div>

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

    </body>
</html>

Automatically hiding divs when clicked using HTML and CSS

Answer №1

Similar questions

I possess an array with a specific structure that I wish to substitute the keys as demonstrated below

AngularJS is failing to properly register custom directives

Something seems off with the color of the getImageData when using Fabric JS getContext('2d')

Updating a specific row in a multiple row form can be achieved when the input field names match in a column

Tips for composing a single aggregation within a query

What is the most effective way to loop through HTML elements using wildcards in Puppeteer to extract innerText?

Image Animation Using a Rotational Control (HTML/JavaScript/...)

Is there a way to automatically populate my second dynamic dropdown list on page load?

Issues with Forms Affecting my Footer

What is the proper way to add a string to a TypeScript array?

Does Firestore arrayunion offer any kind of callback function?

Choose a navigation item from the list containing a nested span element

I am struggling to style a form effectively with CSS grid

Node JS server fails to load CSS even with the use of express.static

Techniques for parsing a String in Objective-C

Invoke two functions simultaneously on a single Onchange event

The vertical writing mode is causing boxes to stack in an unexpected direction

Apply CSS code to create a fading effect for a container

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages