.Toggle function with php on mobile

.Toggle function with php on mobile

    I've made notes in the code below, on my mobile site I would like to hide information unless a user taps on the name.  There will be anywhere from 3 to 100 "Names" on the screen at a time depending on what the user is searching for, and each one will need to have information hidden until the name is tapped.  This should be a simple toggle, however, each line item is being dynamically pulled from a database so I can't hard code the toggle function.  Any thoughts on how I could fix this?
    1. //I've cut down the code for the sake of ease of reading.  
    2. //Set Mobile CSS
    3. $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");  
    4. $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");  
    5. $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");  
    6. $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");  
    7.  
    8. if ($iphone || $android || $ipod || $blackberry)  
    9. {  
    10. $mobile = TRUE;
    11. $namecss = "mobileName";
    12. } 
    13. else {
    14. $namecss = "Name";
    15. }
    16. //Loop through database
    17. while($row = mysql_fetch_array($result)){

    19. if ($mobile) {
    20. $fullname = $row['title'] . $row['name'];
    21. //Show the name
    22. echo "<div id='" . $namecss . "' class='" . $align . "'>[" . $row['title'] . "] " . $row['name'] . "</div>";
    23. //Make script to toggle() the hidden layer
    24. echo "<script>$( '#" . $namecss ."' ).click(function() {  $( '#" . $fullname . "' ).toggle();});</script>";
    25. //hidden layer
    26. echo "<div id='" . $fullname . "'>" . $row['price'] . "</div>";
    27.       }
    28. }