Html - How to make a div Disappear when i click out side of it?

iii
April 30, 2024
83 views
0 votes
2 Answers

How can I implement a feature in the Khan Academy environment where a dropdown box disappears if the user clicks outside of it, but remains visible if clicked inside, using JavaScript/CSS/HTML? Despite attempts, the current implementation closes the dropdown even when clicked inside. The code provided uses an event listener attached to the document’s click event to hide the dropdown if the clicked element is not the dropdown itself or the account image. What might be causing this issue, and how can it be addressed to achieve the desired functionality within the constraints of the Khan Academy environment? Here is the code I’ve attempted:

// Function to open the account dropdown
function openAccdrpdwn() {
  document.getElementById("acc-drpdwn").style.display = "block";
} // Event listener to open the account dropdown when clicking on the account image
document.getElementById('account-signin').addEventListener('click', openAccdrpdwn);
// Function to open the account dropdown





// Event listener to close the account dropdown when clicking outside of it
document.onclick = function(event) {
  var dropdown = document.getElementById("acc-drpdwn");
  var accountImage = document.getElementById("account-signin");

  if (event.target !== dropdown && event.target !== accountImage) {
    dropdown.style.display = "none";
  }
};

#account {
  background-color: rgb(247, 247, 247);
  width: 175px;
  height: 300px;
  border-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  box-shadow: 0px 0px 7px 3px lightgray;
  z-index: 1;
}

#inside-account {
  background-color: rgb(209, 255, 215);
  width: 175px;
  height: 80px;
  border-top-right-radius: 17px;
  border-top-left-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  z-index: 2;
}

#acc-drpdwn {
  display: none;
}

.account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 1.8px;
  cursor: pointer;
}

#account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: -2px;
  top: -2.2px;
  float: left;
}

```

<button class="account-image" id="account-signin">
        <img id="account-image" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt="Sample User Icon">
        </button>
<div id="acc-drpdwn">
  <div id="account"></div>
  <div id="inside-account"></div>
</div>

However, this code doesn’t seem to work as expected. The box still disappears even when clicked inside of it. Can you provide guidance on how to properly implement this functionality within the constraints of the Khan Academy environment?

Answers

Because dropdown has child elements, that event.target does necessarily be itself but its children. What you could do is to test if the event.target is a descendent of dropdown:

if (!dropdown.contains(event.target) && event.target !== accountImage) {
  dropdown.style.display = "none";
}

// Function to open the account dropdown
function openAccdrpdwn(event) {
  event.stopPropagation(); // stop triggering document.onclick when opening popup
  document.getElementById("acc-drpdwn").style.display = "block";
} // Event listener to open the account dropdown when clicking on the account image
document.getElementById('account-signin').addEventListener('click', openAccdrpdwn);
// Function to open the account dropdown



// Event listener to close the account dropdown when clicking outside of it
document.onclick = function(event) {
  var dropdown = document.getElementById("acc-drpdwn");
  var accountImage = document.getElementById("account-signin");

  if (!dropdown.contains(event.target) && event.target !== accountImage) {
    dropdown.style.display = "none";
  }
};

#account {
  background-color: rgb(247, 247, 247);
  width: 175px;
  height: 300px;
  border-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  box-shadow: 0px 0px 7px 3px lightgray;
  z-index: 1;
}

#inside-account {
  background-color: rgb(209, 255, 215);
  width: 175px;
  height: 80px;
  border-top-right-radius: 17px;
  border-top-left-radius: 17px;
  position: absolute;
  top: 68px;
  left: 408px;
  z-index: 2;
}

#acc-drpdwn {
  display: none;
}

.account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 1.8px;
  cursor: pointer;
}

#account-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
  position: absolute;
  left: -2px;
  top: -2.2px;
  float: left;
}

```

<button class="account-image" id="account-signin">
  <img id="account-image" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt="Sample User Icon">
</button>
<div id="acc-drpdwn">
  <div id="account">Account</div>
  <div id="inside-account">Inside Account</div>
</div>

Refer to the sample below

<!doctype html>
<html lang="en" onclick="bubbleOut(this)">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    function bubbleOut(self) {
      const domRef = document.getElementById("disappear");
      domRef.remove();
    }
    function eatTheclick(ref) {
      event.stopPropagation();
    }
  </script>
  <body style="border: 1px salmon solid">
    <div
      style="width: 100px; height: 500; border: 1px solid red"
      onclick="eatTheclick(this)"
    >
      <p id="disappear">Click me I stay. Click outside of red block, I stay</p>
      <div>I remain</div>
      <div>So Do I</div>
    </div>
  </body>
</html>

You can save the code above as an html file and then open it in browser. This isn’t exact answer to your problem, but you could apply the same logic to your code.

Root element HTML tag has onclick event, which get’s the reference to the element to be removed and onclick removes the element.
The element itself has onclick event which stops the click propagation.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a div Disappear when i click out side of it?

Answers