How do I hide the drawer when the user clicks on an item? Or when a button is clicked?
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
<i class="material-icons">add</i>
</button>
</div>
How do I do it that when the button is clicked, the drawer will be hidden as if I clicked outside of the drawer? I tried simulating a click event outside of the drawer but it still does not hide.
I believe you can remove the is-visible
class from .mdl-layout__drawer
. I tried modifying a codepen example from their site: demo. My pure javascript event binding is rusty, but as I mentioned, you just need to remove the .is-visible
class from the drawer.
The code I provided was for v1.0.0
of mdl and is not actual anymore. Starting at v1.1.0
there is a public API provided for toggling the drawer, as described in Benjamin's answer. If you're between v1.0.6
and v1.1.0
, have a look at idleherb's answer.