javascript conceal a div when clicked elsewhere

Question

javascript conceal a div when clicked elsewhere

I am trying to implement two JavaScript functions: 1) Displaying a DIV (welcomeDiv) when clicking on a button; 2) Hiding the div by clicking outside of 'welcomeDiv' container.

 function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
        }

 function hideDiv() {
        document.getElementById('welcomeDiv').style.display = "none";
        }

While both functions are functional, I am facing an issue where 'welcomeDiv' is being hidden even when clicked inside it, as it is part of the container DIV. To resolve this, I need to disable the hideDiv() function when a click occurs inside 'welcomeDiv'. I have attempted something like:

<div id='welcomeDiv' onclick='hideDiv().disable'>

However, I have been unsuccessful in writing the code correctly despite trying various methods. Any help or suggestions would be greatly appreciated. Thank you in advance.

javascript html css

Answer 1

Answer №1

Here is a simple HTML file showcasing a solution:

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .container { width: 400px; height: 280px; background-color: #e5e5e5;}
            #welcomeDiv { width: 100px; height: 100px; background-color: #b0b0b0; }
        </style>
    </head>
    <body>

        <div class="container" onclick="hideDiv();">
            <button onclick="showDiv();">
                Hello
            </button>

            <div id="welcomeDiv">
                <h1>Welcome</h1>
            </div>
        </div>

        <script type="text/javascript">
            function showDiv() {
                document.getElementById('welcomeDiv').style.display = "inherit";
                event.stopPropagation();
                // stop propagation on button click event
            }

            function hideDiv() {
                var target = event.target || event.srcElement;
                // filter event handling when the event bubbles
                if (event.currentTarget == target) {
                    document.getElementById('welcomeDiv').style.display = "none";
                }

            }
        </script>
    </body>
</html>

Answer 2

Here is a simple HTML file showcasing a solution:

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .container { width: 400px; height: 280px; background-color: #e5e5e5;}
            #welcomeDiv { width: 100px; height: 100px; background-color: #b0b0b0; }
        </style>
    </head>
    <body>

        <div class="container" onclick="hideDiv();">
            <button onclick="showDiv();">
                Hello
            </button>

            <div id="welcomeDiv">
                <h1>Welcome</h1>
            </div>
        </div>

        <script type="text/javascript">
            function showDiv() {
                document.getElementById('welcomeDiv').style.display = "inherit";
                event.stopPropagation();
                // stop propagation on button click event
            }

            function hideDiv() {
                var target = event.target || event.srcElement;
                // filter event handling when the event bubbles
                if (event.currentTarget == target) {
                    document.getElementById('welcomeDiv').style.display = "none";
                }

            }
        </script>
    </body>
</html>

Answer 3

Answer №2

It could be a possibility:

<div id='welcomeDiv' onclick='showDiv()'>

Answer 4

It could be a possibility:

<div id='welcomeDiv' onclick='showDiv()'>

Answer 5

Answer №3

To determine what has been clicked, access the JavaScript 'event' object. This object contains information regarding the event that occured, such as a 'MouseEvent'. Utilize this data to identify the clicked element by examining the 'target' property. Assign an ID to your containing DIV for better click filtering:

HTML:

<div id="welcomeContainer" onclick="showDiv(event)" style="border: 3px solid red;">
Outer Div
<div onclick="hideDiv(event)" id="welcomeDiv" style="border: 3px solid blue;">Inner Div</div>

JavaScript:

function showDiv(event) {
    if(event.target.id === "welcomeContainer"){
        document.getElementById('welcomeDiv').style.display = "block";
    }
}

function hideDiv(event) {
    document.getElementById('welcomeDiv').style.display = "none";
}

Check out this working code demonstration on Fiddle: http://jsfiddle.net/fmz2h6kj/

Answer 6

To determine what has been clicked, access the JavaScript 'event' object. This object contains information regarding the event that occured, such as a 'MouseEvent'. Utilize this data to identify the clicked element by examining the 'target' property. Assign an ID to your containing DIV for better click filtering:

HTML:

<div id="welcomeContainer" onclick="showDiv(event)" style="border: 3px solid red;">
Outer Div
<div onclick="hideDiv(event)" id="welcomeDiv" style="border: 3px solid blue;">Inner Div</div>

JavaScript:

function showDiv(event) {
    if(event.target.id === "welcomeContainer"){
        document.getElementById('welcomeDiv').style.display = "block";
    }
}

function hideDiv(event) {
    document.getElementById('welcomeDiv').style.display = "none";
}

Check out this working code demonstration on Fiddle: http://jsfiddle.net/fmz2h6kj/

javascript conceal a div when clicked elsewhere

Answer №1

Answer №2

Answer №3

Similar questions

Determine the total number of rows present in a Selenium web table

Exploring schema.org itemref inquiries

Looking for assistance with React - Can anyone help get this up and running?

Simultaneously iterate through two recursive arrays (each containing another array) using JavaScript

an issue encountered while trying to print a webpage styled with CSS

My XSLT document is not converting to valid HTML code

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

jQuery conceal input field after it has been displayed

Deleting Empty Session Data

Unable to conceal a DIV using React

Filter search results to display only posts

Issue with Ajax not triggering PHP script

How can I center <text> within a button using Vue Native?

Saving data values for utilization in jQuery

Difficulty filling height with Bootstrap 4 flex-grow

The ngMessages validation feature in AngularJS fails to remove error messages from the CSS styling

There seems to be an issue with the syntax in ReactJS: the URL is

Combine strings in an array of objects

The parameters passed in an axios get request are not carried over to a create request

Identifying input fields using XPath depending on their associated labels