'How to tell if navbar is collapsed or not?

I have a navbar:

<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#"></a>
  <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse text-right" id="navbarNav">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" id="about" href="Gibbs.html"><span><strong>ABOUT</strong></span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>NEWS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>RESEARCH</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
          </li>
      </ul>    
  </div>
</nav>

When the navbar is collapsed (i.e. not expanded), I would like to style other elements on the page. Is there a simple way in JavaScript that can tell when the navbar is collapsed vs. not collapsed? Tried this:

if ($('#toggle').attr('aria-expanded') == "true") {
  console.log("true")
  }

But it doesn't work.

javascripthtmlcssbootstrap-4nav


Solution 1:[1]

I tested it and it works. You are probably having trouble firing the test or your toggle button does not have the mentioned id (toggle).

Firing the event (on click)

Capture all clicks with:

window.onclick = function(e) { ... };

Alternative to your test

Just good old Vanilla JS:

if (!document.getElementById('toggle').classList.contains('collapsed')) {...}

Solution 2:[2]

You may use the collapse events:

$('#navbar').on('show.bs.collapse', function () {
    console.log('not collapsed');
}).on('hide.bs.collapse', function () {
    console.log('collapsed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav id="navbar" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#"></a>
    <button id="toggle" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse text-right" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" id="about" href="Gibbs.html"><span><strong>ABOUT</strong></span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>NEWS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>LAB MEMBERS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>RESEARCH</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="publications.html"><span>PUBLICATIONS</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>OPPORTUNITIES</span></a>
            </li>
        </ul>
    </div>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 gaetanoM

Related Questions