i have looking for about this kind of button
from leaflet locate control plugin, and this geocoder example

but i still did'nt understand the basic to make extend control with expand function
so i add some jquery code to create this toogle button:

L.Control.STARTpointroute = L.Control.extend({
        options: {
        position: 'topright'
        },
        initialize: function(options) {
        L.Util.setOptions(this, options);
        },
        
        
/*BEGIN CREATE BUTTON USING LEAFLET*/

        onAdd: function() {
          this._map = mymap;
          var className = 'leaflet-control-startpoint',
          container = this._container = L.DomUtil.create('div', className);
          L.DomEvent.disableClickPropagation(container);
          var button = this._button = L.DomUtil.create('button', className );

          var showcrosshair = L.DomUtil.create('span', 'when-inactive');
          showcrosshair.textContent ='Pilih Lokasi Awal Rute';
          button.appendChild(showcrosshair);

          var marklocation = L.DomUtil.create('span', 'when-active');
          marklocation.textContent ='Okay';
          button.appendChild(marklocation);

/*END CREATE BUTTON USING LEAFLET*/
          
/*BEGIN FUNCTION FOR TOOGLE BUTTON USING JQUERY*/
          $(function(){
              $('button.leaflet-control-startpoint').on('click', handler1);
            $('button.leaflet-control-startpoint').on("click", _crosshair);
            });
          
          function handler1() {
            $(this).addClass("active");    
            $(this).on("click", handler2);
            $(this).on("click", _marker);
            $(this).off("click", _crosshair);
          }
    
          function handler2() {
            $(this).removeClass("active");
            $(this).on("click", handler1);
            $(this).on("click", _crosshair);
            $(this).off("click", _marker);
          }
/*END FUNCTION FOR TOOGLE BUTTON USING JQUERY*/



          _crosshair = function() {
           //show croshair the center of map
          }
          
          _marker = function() {
            //add marker by the center coordinate
          }

          container.appendChild(button);
          return button;
        }
      });


      var startPointRoute = new L.Control.STARTpointroute();
      mymap.addControl(startPointRoute);

and some css code

.leaflet-control-startpoint.active .when-active,
.leaflet-control-startpoint .when-inactive{
    display:inline-block;
}

.leaflet-control-startpoint.active .when-inactive,
.leaflet-control-startpoint .when-active{
    display:none;
}

can any body help me figure out how to create this toogle button using only leaflet (expand and collapse function)