in HTML file: <span class='toggleButton'>-</span> for 3 div id

in js  file: .......+  "<dd class='lab-detail.hover'><font class='popup' title=\" .......

         ........reInitPopUps();

  in three different segments on the page.

in css file :

            .toggleButton {float:right; padding-top:0.4em; text-align: center; ............

 

 

These are functions for toggle and popup:

function reInitPopUps(){
   //add the class of hover to all elements with the class of popup
   $(".popup").hover(function(){
      if (this.title > " "){
         this.tip = this.title;
   this.title = "";
          $('<div id="tooltip">' + this.tip+ '</div>').css( {
            position: 'absolute',
            width: '400px',
            top: event.clientY+20,
            left: event.clientX+40,
            'font-weight': 'bold',
            border: '1px solid #000',
            padding: '10px 10px 10px 10px',
            'background-color': '#ffc',
            opacity: 1.00
            }).appendTo("body").fadeIn(0);
           
            positiontip(); 
         }     
      },
    function(){
       if (this.tip > " "){
       $("#tooltip").remove();
       this.title = this.tip;
       }
    } 
  ); 
  //toggle button for +/- for each section
  $(document).ready(function() {
   $('.toggleButton').click(function() {
   if ($(this).siblings("div").is(":hidden"))
      {
          $(this).html("-");
          $(this).siblings("div:first").slideDown("fast");
      } else {
          $(this).html("+");
          $(this).siblings("div:first").slideUp("fast");
      }
   });
});

}

 

Toggle works with only one popup in the page. If I have more them one popup, all three toggle buttons stop working properly. INstead, each section flickers very fast after clicking on the toggle and never expands to the end. Please help!