Why toggle() method is not working properly in my program?

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;开发者_如何学Go

           $.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);
                }
           });

      });
 })

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.

I'm pretty sure toggle ultimately modifies the display css attribute. Are you sure your .css setting of #popup + id is not interfering with the toggle?

Toggle should show it the first click, then hide it the next. However, if you show it with CSS right before toggle() is triggered, it may be toggling it off every time.

Try commenting out the line above toggle(). That's my guess anyway.

Toggle works as you say because it just displays or hides an element according to is visibility. In your case you are calling it on an element with display= block and it should always set it display to none, thus hiding it