Displaying directions separate

Help and support
1

i have a page that gets users current location. When the get directions button is submitted it shows directions. When the close button is selected it minimises the directions into the top right hand corner of the map. By selecting the icon in the top right hand corner it displays the directions again. What i am trying to achieve is when i close the directions they do not minimise they just close and use the directions button to display again or better still display the directions under the map.

<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script>
    let map = L.map('map').setView([0, 0], 16);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    let marker;
    let routingControl;

    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(function(position) {
            let lat = position.coords.latitude;
            let lon = position.coords.longitude;

            map.setView([lat, lon], 16);

            if (!marker) {
// Create a new marker if it doesn't exist
marker = L.marker([lat, lon]).addTo(map)
    .bindPopup(`Michael Is Here<br>Latitude: ${lat}<br>Longitude: ${lon}`, { closeButton: false }) // Display coordinates
    .openPopup();
// Populate the input field with the marker's coordinates
document.getElementById('destination').value = `${lat}, ${lon}`;

} else {
// Update the marker position if it already exists
marker.setLatLng([lat, lon]);
marker.getPopup().setContent(Michael Is Here<br>Latitude: ${lat}<br>Longitude: ${lon}); // Update popup content with coordinates
// Update the input field with the new coordinates
document.getElementById(‘destination’).value = ${lat}, ${lon};
}

        }, function() {
            alert('Unable to retrieve your location.');
        });
    } else {
        alert('Geolocation is not supported by this browser.');
    }

    document.getElementById('setDestination').onclick = function() {
        let destinationInput = document.getElementById('destination').value.split(',');
        if (destinationInput.length === 2) {
            let destLat = parseFloat(destinationInput[0]);
            let destLon = parseFloat(destinationInput[1]);
            if (routingControl) {
                routingControl.setWaypoints([marker.getLatLng(), L.latLng(destLat, destLon)]);
            } else {
                routingControl = L.Routing.control({
                    waypoints: [
                        marker.getLatLng(),
                        L.latLng(destLat, destLon)
                    ],
                    routeWhileDragging: true
                }).addTo(map);
            }
        } else {
            alert('Please enter valid coordinates in the format: lat, lon');
        }
    };

</script><br>