Problem with jquery-ui and bootstrap offcanvas

I’m trying my hardest to figure it out but some how my navbar that i made with bootsrap “I think” is not corresponding with my jQuery-ui. And I can’t understand why. If some one the issues you will get dogma from Doge god. Cheers guys here is the code: HTML

        <nav class="navbar navbar-expand-md navbar-light bg-light" >
          <div class="container" >
            <a href="#" class="navbar-brand">
              <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="offcanvas"
              data-bs-target="#toggleMobileMenu"
              aria-controls="toggleMobileMenu"
              aria-label="Toggle navigation"
              id="slidebutton"
              >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div
            class="collapse navbar-collapse offcanvas-collapse"
            id="toggleMobileMenu" id="navslide">
              <ul class="navbar-nav ms-auto">
                <li ><a class="nav-link" href="">...</a></li>
                <li ><a class="nav-link" href="">...</a></li>
                <li ><a class="nav-link" href="">...</a></li>
          </ul>
        </div>
      </div>
      </nav>
    </div>

jquery-ui:

$('#slidebutton').click(function(){
    $('#navslide').toggle('slide');
})

Answer

The issue is related to an HTML ID Attribute, in the following element, it has two:

<div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu" id="navslide">

When this is correct, the slide works as expected.

$(function() {
  $('#slidebutton').click(function() {
    $('#toggleMobileMenu').toggle('slide', {}, 500);
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container">
    <a href="#" class="navbar-brand">
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-label="Toggle navigation" id="slidebutton"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse offcanvas-collapse" id="toggleMobileMenu">
        <ul class="navbar-nav ms-auto">
          <li><a class="nav-link" href="">Item 1</a></li>
          <li><a class="nav-link" href="">Item 2</a></li>
          <li><a class="nav-link" href="">Item 3</a></li>
        </ul>
      </div>
  </div>
</nav>
</div>

Advertisement

Answer