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

before collapse

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

enter image description here

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 ?

1 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");
        // Update the current marker's popup
        m.getPopup().update() // If m is the popup popup.update()
  • 1
    In this case pop update but not collapse. seems like changed css is not applied. Anyway I resolved this using keep two pop up and each time called marker.bindPopup(collapsepopupStr); Jul 23, 2017 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.