show/hide button for leaflet legend

Question

Is it possible to add a simple show/hide button on the leaflet map which will allow the user to see the legend on choice?

Here is my code for the legend:

    var legend0 = L.control({});
        legend0.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend'),
    grades = ["Localisation", "Orientation"],
    labels = ["icon-gamze/location1-zoom1.png", "icon-gamze/location2-zoom1.png"];
     div.innerHTML += '<b>Localisation</b><br>' 
for (var i = 0; i < grades.length; i++) {
       div.innerHTML +=
       (" <img src="+ labels[i] +" height='20' width='20'>") + grades[i] +'<br>';
}

       return div;
      };

       legend0.addTo(map);

Answer 1

For this, you need to write a few lines in Javascript. Many solutions exist, depending if you want to use JS and/or CSS frameworks or not. Here is below an example with jquery:

First, add a button somewhere in your page:

<button type="button" onclick="toggleLegend();">My button</button>

Then, in the function toggleLegend():

    showLegend = true;  // default value showing the legend

    var toggleLegend = function(){
        if(showLegend === true){
        /* use jquery to select your DOM elements that has the class 'legend' */
           $('.legend').hide(); 
           showLegend = false; 
        }else{
           $('.legend').show();
           showLegend = true; 
        }
    }

This target all the elements that have the class 'legend' of your page.

Have a look at e.g. https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript#21070237 for a pure vanilla JS example of show/hide.

J.