Collapsable control in Leaflet

Question

A simple to ask but difficult to answer question:

I want to create a control like the one in the Leaflet layers example:

http://leafletjs.com/examples/layers-control.html

Notice that the control is a small button, until pressed. When pressed, it expands, and shows all options. I can't find anywhere in the documentation on how this was implemented, or how I can copy this behaviour. Does anyone have any idea?

Answer 1

You mean it expands when hovering (not pressed) ...

There is no documentation but you can read the code here: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js

Note in line 70

if (!L.Browser.android) {
                L.DomEvent.on(container, {
                    mouseenter: this._expand,
                    mouseleave: this._collapse
                }, this);
            }

And at the end of the file

_expand: function () {
    L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
},

_collapse: function () {
    L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
}