jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-light">
  <a href="/" class="navbar-brand"><img src="Blank" alt="blank" height="80" width="185"/></a>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">
        <nav class="navbar navbar-light bg-light" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggler x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x">
               <span class="navbar-toggler-icon"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse-x">
            <ul class="nav navbar-nav navbar-right">
              <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
              <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li>
            </ul>
          </div> .navbar-collapse
        </nav>
      </div>
    </div>
  </div>
  <div class="navbar-collapse collapse" id="navbar2">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Info<span class="sr-only">Information Section</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services<span class="sr-only">Services Section</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact<span class="sr-only">Contact Section</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">FAQ<span class="sr-only">Frequently Asked Questions</span></a>
      </li>
    </ul>
  </div>
</nav>