CODEWITHSUNDEEP
javascriptzurb-foundationoff-canvas-menu
Tim Morton
Tim Morton

Reputation: 2644

Programmatic close of Foundation 6 offCanvas

I want to use javascript to close an offcanvas area as the result of loading an ajax script.

The documentation says $('#element').foundation('close', cb); but there isn't much in the way of explanation as to what #element and cb are :/

What are #element and cb? How would you programmatically close their example?

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Menu -->
        <ul class="vertical menu">
          <li><a href="#">Foundation</a></li>
          <li><a href="#">Dot</a></li>
          <li><a href="#">ZURB</a></li>
          <li><a href="#">Com</a></li>
          <li><a href="#">Slash</a></li>
          <li><a href="#">Sites</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page content -->
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 727

Answers (2)

Ergin &#199;elik
Ergin &#199;elik

Reputation: 775

You can use trigger close button.

<button id="btn-close-offcanvas" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>


$("#btn-close-offcanvas").click();

Upvotes: 0

guy banlock
guy banlock

Reputation: 127

you can do this in js with $('#offCanvas').foundation('close');

Upvotes: 1

Related Questions