kindly asking a question,
my goal is
click div class="head"
show or hide div class="toggle"
or click outside div to hide div class="toggle"
after adding addEventListner inside if statement , it just run a single click then doesn't toggle anymore How to fix that, Thank you!
$(document).ready(function() {
$(document).on('click', '.head', function(elem) { // click div with class = head
var toggle = elem.target.getElementsByClassName('toggle')[0]
if (toggle.style.display = "none") {
toggle.style.display = "";
document.addEventListener('click', function() {
toggle.style.display = "none";
})
} else {
toggle.style.display = "none";
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="head">expand
<div class="toggle" style="display:none;">
<p>number 1</p>
<p>number 2</p>
</div>
</div>
</div>Try this ;)
$(document).ready(function() {
var toggle = document.getElementsByClassName("toggle")[0];
document.addEventListener('click', function() {
if (toggle.style.display !== "none") {
toggle.style.display = "none";
}
});
$(document).on('click', '.head', function(elem) { // click div with class = head
if (toggle.style.display = "none") {
toggle.style.display = "";
} else {
toggle.style.display = "none";
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="head">expand
<div class="toggle" style="display:none;">
<p>number 1</p>
<p>number 2</p>
</div>
</div>
</div>I managed to fix the script by using once:true; or one() that recommended by @freedomn-m
Thank you guys for all the comments and answers
pure js
$(document).ready(function() {
$(document).on('click', '.head', function(elem) { // click div with class = head
var toggle = elem.target.getElementsByClassName('toggle')[0]
if (toggle.style.display == "none") {
toggle.style.display = "";
document.addEventListener('click',function(){
toggle.style.display = "none";
}, {
once: true,
});
} else {
toggle.style.display = "none";
}
})
})
jquery
$(document).ready(function() {
$(document).on('click', '.head', function(elem) { // click div with class = head
var toggle = elem.target.getElementsByClassName('toggle')[0]
if (toggle.style.display == "none") {
toggle.style.display = "";
$(document).one('click',function(){
toggle.style.display = "none";
})
} else {
toggle.style.display = "none";
}
})
})