Question

Using the code below I am displaying pop up windows. I used the toggle() animation method. But it is only showing the pop up window once. What is the reason? How can I solve this problem?

Code:

$(document).ready(function()
 {
      $(".ishow").click(function()
      {
           var info=$(this).attr("id");
           var id=info.replace("/","");

           var cor=$(".rd"+id).offset();
           var x=cor.left;
           var y=cor.top;

           $.ajax
           ({
                type:"post",
                url:"roomstaypopup.php",
                data:"id="+info,
                success: function(html)
                {                          
                     $("#popup"+id).css({"display":"block","left":x-51,"top":y+18});
                     $("#popup"+id).toggle();
                     $("#popup"+id).html(html);
                }
           });

      });
 })

Answer 1

You are setting the style to “display”:”block” right before the .toggle() meaning that .toggle() will always hide the element.

Try removing "display":"block",. Also .toggle() won’t be animated unless you add a duration like .toggle(500);. But for your purpose I think you might want to use .show(); instead of .toggle(500); and put $("#popup"+id).html(html); before your call to show(); or toggle(); to make sure the html is inserted before the animation begins.