I want to create a scenario where a "form" is only visible after clicking on another "button" under the following conditions:
- The "form" will only appear if the user clicks on the "button".
- If the user clicks anywhere outside of the form or clicks the button again, the form should become hidden.
/* JAVASCRIPT */
const outer = document.getElementById('outer');
const inner = document.getElementById('inner')
outer.onclick = function() {
if (inner.style.visibility == 'visible') {
document.getElementById('inner').style.visibility = 'hidden';
} else {
document.getElementById('inner').style.visibility = 'visible';
}
}
const ignoreClickOnMeElement = document.getElementById('inner');
document.addEventListener('click', function(event) {
const isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
if (!isClickInsideElement) {
// when uncommenting the line below everything stop working, rather then just closing if I click outside this div
/* document.getElementById('inner').style.visibility='hidden';*/
}
});/* CSS */
* {
border: thin solid black;
}<!-- HTML -->
<body>
<div class="outer" id="outer">
<button>Visible</button>
</div>
<div class="inner" id="inner" style="visibility: hidden;">
<form id="form">
<input type="number">
<input type="number">
</form>
</div>
</body>