Leaflet popup not pointed to marker when collapse

Question

In my application I am using leaflet popup to display more details regarding the marker (Vehicle). User should be able to collapse and expand the popup.

Fist user click on the marker it will display the pop as

When click on collapse button, popup content will be collapse using jquary. But it will not pointed to marker correctly.

To do this I only change the css on the popup content using jqury. My collapse function be like.

function collapseDetail() { $("#serviceTable").css("display", "none"); $("#serviceDataDownIcon").show(); $("#serviceDataUpIcon").hide(); }

How can I avoid this and pointed the popup to the marker correctly ?

Answer 1

From looking at this and this it seems that you collapse function should use the popup.update() method to refresh the popup's width. Something like

  // Pass the current marker to the function (or the popup itself)
    function collapseDetail(m) {
        $("#serviceTable").css("display", "none");
        $("#serviceDataDownIcon").show();
        $("#serviceDataUpIcon").hide();
        // Update the current marker's popup
        m.getPopup().update() // If m is the popup popup.update()
    }