I am grabbing a list of school names from a database. When the user clicks on the school name, i want the code to fetch 2-3 other attributes related to the school name that the user has clicked on.

My code for the single school name list:

$query = mysql_query("Select schoolname, product, username, password from credentials c
join products p on p.productid = c.productid
join schools s on s.schoolid = c.schoolid
join icons i on i.productid = p.productid
order by s.schoolname");

echo '<ul>';
while($row = mysql_fetch_array($query))
{                   
echo "<li> <a href='#'>" . $row['schoolname'] . "</a> </li>";
}

echo '';

Current Output:

• School A
• School A
• School B
• School B
• School B
• School C
• School C

Expected Output:

1. School name displayed only once (distinct won't work because each school name has 2-3 product credentials

   • School A
   • School B
   • School C

2. Ability for User to click on a school. then the school names underneath will move down (toggle effect) and user can see product, username and password displayed for the school clicked (for example: user clicked on School A)

   • School A
   • productname1, username, password

   • productname2, username, password

   • School B

   • School C