Hi guys! I set the visibility of a container toggleable via a button/icon.
If I want to hide that container again, I need to click the button/icon again. How can I make the container hide when I click outside of it?
Here is the logic I created on the onclick event of the icon.
here is the property of the hidden container
Hi @Mikhel Dela Cruz ,
You mean that, you want to hide the container when it's in off focus, Am I right? If not
Can you explain bit clearly of what you want to achieve or can you please share your OML file.
Regards,
Nandhakumar S.
Sure. When I click the sort icon, the container containing the dropdown with options will appear. to hide it again I need to click the sort icon again. That is the current scenario but what I want to happen is when I click anywhere on the screen outside the hidden container, the container will be hidden again and I don't need to hover over the sort icon again and click it to hide the container.
I attached the oml for reference.
Hi @Mikhel Dela Cruz
Are you using this container inside Pop-Up ?
nope, I am not yet familiar with pop-ups.
You can use jquery in on ready event of page-
Find jquery-
$("#containerId").on('blur',function(){
$(this).fadeOut(300);
});
Thanks
Hi @Arun Rajput ,
notice that this is a question about a Reactive application.
JQuery doesn't get automatically included in Reactive, and I don't think such a small amount of self written code warrants including it, so preferably, give answer in vanilla javascript for Reactive.
also, you are using a class selector on an id ??
Dorine
Hi,
I don't understand the challenge. When you click on a button a container appears.
When the mouse is not hovering over the container it needs to be hidden.
But...
When you click on the button the mouse is already not hovering on the container, so even if you would have the right CSS the container would immediately be invisible again.
Daniel
what I mean is when you click outside the hidden container, it should be hidden again so the user doesn't need to hover over the button and click it again to hide the container
Hi Mikhel,
We can do this by css .
Use the below container structure
<div class="sort">
<div class="one">hover me</div>
<div class="two">hide me</div>
</div>
Css
.one:hover + .two {
display:none;
}
hope this helps