How do I extend the control?

[ajlaker]

I love this plugin!

I'm trying to add a simple close button to work with the grouped layer control, but I'm stuck on how to extend it.

Without using the grouped layer control, I'm able to use the method explained here: https://stackoverflow.com/questions/32584613/manually-close-layer-control-window-javascript

Unfortunately, when I try to merge this method with the grouped layer script, my code fails.

I feel like I'm close, but I just can't seem to get it. I'd appreciate any suggestions.

I'm trying something like this...

`
L.Control.Custom = L.control.groupedLayers.extend({
onAdd: function () {
this._initLayout();
this._addButton();
this._update();
return this._container;
},
_addButton: function () {
var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
var button = L.DomUtil.create('button', 'my-button-class', elements[0]);
button.textContent = 'Close control';
L.DomEvent.on(button, 'click', function(e){
L.DomEvent.stop(e);
this._collapse();
}, this);
}
});

var controlLayer = L.Control.Custom(baseLayers, groupedOverlays, options);
map.addControl(controlLayer);
`

[ajlaker]

P.S. -- I should add that I'm able to add the button and toggle the panel open/closed with vanilla JS, but I was wondering if there was a simpler solution I'm not seeing here.