JQUERY Tutorial | Hide Collapsible Navbar When Clicked Outside It | Bootstrap

You can now download a code from : 
https://unpossiblepog.com/codes/javascript+jquery+bootstrap/Hide-Collapsible-Navbar-When-Clicked-Outside

In this video, I shall create a code in JQUERY to hide bootstrap’s responsive navbar when user clicks outside that navbar.

I have created one bootstrap page.

When I convert User Interface from desktop to mobile version, and click on hamburger icon, the menu appears and same button is used for hiding it.

Lets create a script tag.

Write a function which shall run as soon as the whole page load.

And first we are going to check if jquery is working or not.

Lets refresh. When I click, it shows the alert message.

Now comment it just for now.

Now we have to observe which one is the main class which shows the navbar,

As there different types of navbar for each version of bootstrap,  only the classes names will differ from me but overall the process will be same.

When I toggle, this part is the topmost part which is changing it’s class.

So have to copy the classes of both toggle button and navbar division.

Now we have to find out the class name where user clicks.

As there are different JQUERY versions, one of them is applicable for your version.

For me the second one works so I am going to comment the first one.

Now we are getting the class name of elements where we clicked.

We shall use the IF-ELSE statements and check if the class is same as navbar’s class or not.

However there are some classes which are inside the navbar, So to find out if we click inside navbar too, we shall use this code in alert box.

Now if we click outside navabar, it shall give 0, but if we click inside navbar it shall give 1.

So we shall also use it inside our IF-ELSE statement.

We shall put if statement empty and use the ELSE part.

Here, if we check, when the navbar is expanded, there is an “IN” class present with it.

So in code, we have to find out if that NAVBAR class have “IN” class with it.

If yes, then we shall auto-click the toggle button.

Lets refresh.

It is not hiding when I click inside the navbar, but is hiding when I click outside.

Don’t forget to like, share and subscribe.Thanks for watching.