Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find out if "navbar-toggle" button is collapsed or hidden with Javascript

Is there a way to find out, with JS, if the toggle button menu is collapsed or hidden.

Does class="navbar-toggle" or data-toggle="collapse" have a parameter which indicates this state?

I know the events that are called when the ".collape" is shown or hidden:

$('.navbar-collapse').on('shown.bs.collapse', function () { //called when dropdown menu is shown });

Furthermore, I know the methods that shows or hides the collapse like this:

$('.navbar-collapse').collapse('hide'); 

But I can´t find any information on how to get the current status of .collapse, telling me if it´s hidden or shown.

like image 313
Turpal Avatar asked Jun 23 '16 15:06

Turpal


People also ask

How do you collapse a collapsed navbar?

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".

How do I hide collapsible bootstrap 5 navbar on click?

Update 2021 - Bootstrap 5 (beta)Use javascript to add a click event listener on the menu items to close the Collapse navbar.. Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

What is collapsing navbar?

This button helps to hide and show the items of the navbar. collapse navbar-collapse class is placed in the main div tag. This class is used for control and cover all the content Navbar with collapsing. The button and content connect using id =”idname” and data-target =”#idName”.


1 Answers

(I am editing this answer with a better way.)

Yes, you can check if the element is visible, using jquery $(element).is(":visible")

Here is a live demo on jsFiddle

Here is some html

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<input type="button" value="click me" onclick="clickedIt()" />

Here is some javascript

function clickedIt() {   
   var canSee = $("#myNavbar").is(":visible");
   alert(canSee);
}
like image 149
Nikki9696 Avatar answered Sep 22 '22 02:09

Nikki9696