Manually Close Layer Control Window (javascript)

I recently started programing in javascript. I have added a layer control window to my map. It's open by default (This works.). Now I want to add a close button to the layer contr

Solution 1:

You can extend L.Control.Layers and add elements to it's container, attach eventhandlers, whatever you want. Something like this:

L.Control.Custom = L.Control.Layers.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.innerText = 'Close control';
      L.DomEvent.on(button, 'click', function(e){
        L.DomEvent.stop(e);
        this._collapse();
      }, this);
    }
});

Example: http://plnkr.co/edit/Je7c0m?p=preview

Solution 2:

cartodb.createLayer(map, layerUrl, {
    layerIndex: 1
}).addTo(map)
  .on('done', function(layer) {
        L.control.layers(baseLayers, 
            {data:layer}, 
            {collapsed:false}
        ).addTo(map);

        document.getElementById('closeBtn').addEventListener('click', function() {
            layer.setAttribute('style', 'display: none;').hide();
        });
    });

// and more shortly if jquery exists
$('#closeBtn').click(function() {
    layer.hide();
});