Question

162

How to open offcanvas from offcanvas

rated 0 times [ 165] [ 3] / answers: 1 / hits: 5275 / 3 Years ago, thu, april 8, 2021, 12:00:00

I have a little problem with open one offcanvas from previous canvas. Generally I have canvas like this using bootstrap 5:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>



<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">

  <div class="offcanvas-header">

    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>

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

  </div>

  <div class="offcanvas-body small">

    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#secondoffcanvas" aria-controls="offcanvasBottom" data-bs-dismiss="offcanvas">Open second offcanvas</button>

  </div>

</div>

second offcanvas:

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="secondoffcanvas" aria-labelledby="offcanvasBottomLabel">

  <div class="offcanvas-header">

    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>

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

  </div>

  <div class="offcanvas-body small">

    second content

  </div>

</div>

My scenario:

Click to open first offcanvas

Click on the button in canvas
Resulst:

first canvas hide

second canvas open

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zariahdiamondz

Add To Favorites

Follow

Total Points: 649

Total Questions: 109

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

zariahdiamondz questions

1 Get esbuild to watch for changes, rebuild, and restart express server

Wed, Jul 13, 22, 00:00, 2 Years ago

1 ethers js exits with this error=> invalid BigNumber value (argument=value, value=undefined, code=INVALID_ARGUMENT, version=bignumber/5.5.0)

Thu, Nov 4, 21, 00:00, 3 Years ago

1 react-data-table-component: access the selected row and assign it to setState

Tue, Jun 15, 21, 00:00, 3 Years ago

1 An argument for 'id' was not provided. angular 11

Tue, Apr 20, 21, 00:00, 3 Years ago

1 Swiper - Next and prev buttons do not work

Sun, Oct 6, 19, 00:00, 5 Years ago

View All

answered 3 Years ago kurtisl · Accepted Answer

Read "how it works"...

"Similar to modals, only one offcanvas can be shown at a time."

However, you can open one from the other. Programmatically show the 2nd when the 1st is hidden...

var offcanvasBottom = document.getElementById('offcanvasBottom')

var secondoffcanvas = document.getElementById('secondoffcanvas')



offcanvasBottom.addEventListener('hidden.bs.offcanvas', function () {

  var bsOffcanvas2 = new bootstrap.Offcanvas(secondoffcanvas)

  bsOffcanvas2.show()

})

Demo