example/basic.html

<!DOCTYPE html>
<html>
<head>
  <title>Basic example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" /><![endif]-->
  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="../src/leaflet.groupedlayercontrol.js"></script>
</head>
<body>

  <div id="map" style="position:absolute;width:80%;height:90%;"></div>

  <script type="text/javascript">

    var cities = new L.LayerGroup();

    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
    L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
    L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
    L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

    var otherplaces = new L.LayerGroup();

    L.marker([39.41, -105.42]).bindPopup('This is a place.').addTo(otherplaces),
    L.marker([39.24, -104.09]).bindPopup('This is another place.').addTo(otherplaces),
    L.marker([39.73, -104.1]).bindPopup('This is a third place.').addTo(otherplaces),
    L.marker([37.77, -104.23]).bindPopup('This is somewhere else.').addTo(otherplaces);


    var restaurants = new L.LayerGroup();

    L.marker([39.69, -104.85]).bindPopup('A fake restaurant').addTo(restaurants);
    L.marker([39.69, -105.12]).bindPopup('A fake restaurant').addTo(restaurants);


    var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors',
    cmUrl = 'http://{s}.tile.opencyclemap.org/{styleId}/{z}/{x}/{y}.png';

    var cycle   = L.tileLayer(cmUrl, {styleId: 'cycle', attribution: cmAttr}),
      transport  = L.tileLayer(cmUrl, {styleId: 'transport', attribution: cmAttr});

    var map = L.map('map', {
      center: [39.73, -104.99],
      zoom: 7,
      layers: [cycle, cities]
    });

    var baseLayers = {
      "Cycle": cycle,
      "Transport": transport
    };

    // Overlay layers are grouped
    var groupedOverlays = {
      "Landmarks": {
        "Cities": cities,
        "Other places": otherplaces
      },
      "Points of Interest": {
        "Restaurants": restaurants
      }
    };

    // Use the custom grouped layer control, not "L.control.layers"
    var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, {'groupedlayers' : {'collapsible': true, 'collapsed' : true, 'expandFirst' : true}});
    map.addControl(layerControl);

    // Remove and add a layer
    //layerControl.removeLayer(cities);
    //layerControl.addOverlay(cities, "Cities", "New Category");

  </script>
</body>
</html>