在下拉列表下移动元素

So, let's say I have a list of strings like this on my page:

 com.pixowl.thesandbox.android 60 60s
 com.pixowl.thesandbox.android 60 60s
 com.pixowl.thesandbox.android 60 60s

Here's the simplified code (php):

while (something) {
    .....
    echo '<div class="list">';
    echo '  <ul>';
    echo '      <li class="first">'.$game_name.'</li>';
    echo '      <li class="second">'.$avg_fps.'</li>';
    echo '      <li class="third">'.$testing_time.'</li>';
    echo '  </ul>';
    echo '</div>';
}

What I want to do is, when I click on one of the strings, another list appears under it, pushing the rest list elements down (obviously, clicking again would cause the second list to retract). Something like:

com.pixowl.thesandbox.android 60 60s
      samsung
      lg
      alcatel
com.pixowl.thesandbox.android 60 60s
com.pixowl.thesandbox.android 60 60s

Solutions considered: I could add a $_GET variable when I click and refresh the page, completely redrawing it as desired. This totally works, but I would really like to know if there's a way to do it without the refresh. It would look much better if all this action looks like a natural animation.

Thanks.