CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4nav
DiamondJoe12
DiamondJoe12

Reputation: 1833

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.

Upvotes: 1

Views: 1818

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Mr. Hugo
Mr. Hugo

Reputation: 12600

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')) {...}

Upvotes: 1

Related Questions