Clicking outside a collapsible div = collapse the div

I Need Help
1

I have a collapsible div that when its open I want it to collapse when you click anywhere outside that div.

The code I am trying, that I can’t get working is…

CODE REMOVED SEE BELOW

@Pealco do you have a suggestion?

I get an error Can't find variable: $ its probably starring me in the face :wink:

2

Ok, so I got it sort of working…

OPS this collapses and opens the div when ever you click anywhere in the window :rofl: :thinking: :thinking:

<script>
window.addEventListener('click', function(e) {
	var container = $('#mydiv');
    if (!container.is(e.target)) 
    {
        container.collapse('toggle');
    }
});
</script>
3

Good morning, I’m not with my laptop, but try

container.collapse.show(‘toggle’);

4

Thanks, (and good morning) that doesn’t work.

Back to the drawing board lol

I think it needs to check if collapsed or not. Because the toggle just toggles regardless.

5

Maybe this could help you…

6

Thanks. I have the collapse div toggling fine. No problems there.

I just want to be able to collapse it when you click outside the div. That seems to be tricky, the closest I get is the entire window become a toggle button for the collapse :rofl::rofl::rofl:

7

@Pealco. So I tried to add multiple conditions to the if statement, I could have it wrong?. I still have the same problem that the whole window becomes a trigger for toggle for the div.

<script>
window.addEventListener('click', function(e) {
	var container = $('#mydiv');
    if  ((!container.is(e.target)) || (container.hasClass('show')))
    {
        container.collapse('toggle');
    }
});
</script>
8

Hello @PeteSharp now I’m at my laptop. Let me check give me a minute…

1 Like
9

I think I find a solution, how you create the div?

10

I have a menu item that opens a div that is collapsed. The menu item has the usual data attributes…

data-toggle="collapse"
data-target="#myID"

The menu item toggles fine.

I just want the user to be able to click outside the div to re-collapse the div. Which I can get working, the problem I have is when people click anywhere in the window the Div toggles open, even when collapsed.

11

I realised my if and statement was wrong, I think it should be like this?

<script>
window.addEventListener('click', function(e) {
	var container = $('#myid');
     if  (!container.is(e.target) && container.hasClass('show'))
    {
        container.collapse('toggle');
    }
});
</script>

The problem is now if you click inside and outside the Div it collapses.

12

Hello @PeteSharp check if is this that you want:

https://blocs.pt/a_helpblocusers/@malachiman2/

2 Likes
13

Mate, thank you. That works perfect.

Im curious what the second statement is doing. I tried seeing if the show class existed but that never worked. what does the .length === 0 do ?

<script>
window.addEventListener('click', function(e) {
	var container = $('#mydiv');
     if  (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.collapse('hide');
    }
});
</script>
1 Like
14

In JavaScript, the length of emptiness is 0 so you make sure that the length will be empty…

1 Like
15

Oh right. Still so much to learn with Javascript. Thanks

16

Hello, @PeteSharp @Pealco how did you got this working? It’s breaking my nerves.

17

Did you change the ID in the script to match your site?

18

Hi @PeteSharp, indeed I did. I created a button, toggle visibility “#test”. Created a bloc, added a DIV and inserted a paragraph bric. and called the DIV bric “#test”. I added the script to the page header (and tried the html bric as well), renamed “#mydiv” to “#test”. It keeps responding as a normal toggle. I’m doing something wrong here.

Jerry

19

Hi @Jerry, add the script to the footer.

Also note, I am not using Blocs menu toggle feature, I am toggling the Bootstrap class collapse

So the menu / button interaction needs to be set to none and two custom data attributes added…

data-target="#MyId"
data-toggle="collapse"

And the collapse class added to the element that is hidden.