Home/ Questions/Q 6691421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:45:00+00:00

Hi all I use a php script to pull the names of the products

  • 0

Hi all I use a php script to pull the names of the products from a mysql db and display them into a list, each list has 4 sub list elements that are displayed and hidden (toggled) via jquery. my issue is if i move my cursor from on product to the next then it starts opeing that products <li> elements before the other one has closed. Such to the effect that if i run my cursor up the list it looks like a slinky 😀

how can i tell the jquery to wait till all other toggles have finished before running the new one?

while($info = mysql_fetch_array( $result ))
    {
    $str .="
              <li id='mas".$info['name']."'><span>".$info['name']."</span>
              <ul id='sub".$info['name']."' class='sub' style='display:none'>
              <li><span>Scripts</span></li>
              <li><span>Questions</span></li>
              <li><span>Forum</span></li>
              <li><span>Tips and Tricks</span></li>
              </ul>
              </li>

              <script type='text/javascript'>   
              $('#mas".$info['name']."').hover(function () {
              $('#sub".$info['name']."').slideToggle('slow');
              });
              </script>

          ";
    }
    echo $str;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can chain commands for the toggle event, with one of the initial chain links being a function which closes all other toggled items, with a callback once finished to toggle the item your’re currently selecting.

    So basically:

    Hover over new toggle->run function to close all toggles, passing the currently selected toggle elements’ id, and skipping the close function for it->have callback function to open currently selected toggle when all others are closed

    However, I would suggest that users want a quick, responsive, interface so shouldnt have to wait too long before getting what they want/expect. I would either look at shortening the time the toggles take to open/close, simply close all other toggles immediately when hovering over a new one, or apply a different type of navigation effect.

    Also, see here for some ideas:

    Jquery Close/Open Multiple Toggles

    Incidentally, have you thought about using/re-purposing an accordian?

    • 0