Force L.control.layers to stay permanently collapsed

Question

I am building a map with Leaflet 1.3.1 containing two layers controls (Control1 and Control2). For some reasons, I want one of them (Control2) to be displayed on the map, and I need it to stay permanently collapsed (in fact I only want the control background picture to be displayed) :

var Control1 = L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map);
var Control2 = L.control.layers(baseMaps, overlayMaps, {collapsed: true}).addTo(map);

I tried to disable mouse hover events in my CSS :

.leaflet-control-layers{
pointer-events: none;}

Which does exactly what I want, but for both controls.

I only need to apply that style to my Control2 variable, how can I proceed ?

I don't know how to edit L.control.layers class.

Answer 1

Here are some modification which will help you to get wanted result :

var Control1 = L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map);
var Control2 = L.control.layers(baseMaps, overlayMaps, {collapsed: true}).addTo(map);
Control2.getContainer().className += ' leaflet-control-layers-disable'; 

And for the css part change it to :

.leaflet-control-layers-disable {pointer-events: none;}