Mdb-ui-kit: How to close or toggle drawer by javascript?

Created on 25 Jul 2018  路  4Comments  路  Source: mdbootstrap/mdb-ui-kit

I want to trigger a close or toggle of the drawer by javascript (jquery), how can I do this?

Most helpful comment

$('#dw-s2').data('bmd.drawer').toggle()
$('#dw-s2').data('bmd.drawer').open()
$('#dw-s2').data('bmd.drawer').close()

Hope that helps!

It doesn't work for me (using v4.1.1):

Uncaught TypeError: $(...).data(...).open is not a function

.toggle() works ok, but that's not what I'm looking for :/

EDIT
.show() and .hide() work \o/

All 4 comments

I have now a dirty workaround:
just force the click() event on the toggle button with the data-toggle attribute.

f.e. if my button is like this:

<button id="drawerToggleButton" class="navbar-toggler d-block" type="button" data-toggle="drawer" data-target="#dw-s2">

I will call:

$('drawerToggleButton').click();

But it would be great to have a official API to access - to toggle, close or open the drawer by javascript.

Hey @Jorgen-VikingGod I was needing the same thing, looked at the source and the Drawer instance is saved to a data attribute. So you can do something like the following:

$('#dw-s2').data('bmd.drawer').toggle()
$('#dw-s2').data('bmd.drawer').open()
$('#dw-s2').data('bmd.drawer').close()

Hope that helps!

thanks @calebfoster for this nice solution!

$('#dw-s2').data('bmd.drawer').toggle()
$('#dw-s2').data('bmd.drawer').open()
$('#dw-s2').data('bmd.drawer').close()

Hope that helps!

It doesn't work for me (using v4.1.1):

Uncaught TypeError: $(...).data(...).open is not a function

.toggle() works ok, but that's not what I'm looking for :/

EDIT
.show() and .hide() work \o/

Was this page helpful?
0 / 5 - 0 ratings