PHP Boostrap Accordion - How to display dynamic data? - php

Question

So I'm trying to get the bootstrap accordion to dynamically show the Top 5 teams judged by most wins, I also use it for other rankings.
The problem is whenever I click tab 2, 3, or 4 it only opens tab 1 in the accordion. I know the issue is from "href='#collapse41'" being the same from every loop. I assume this will require a unique ID for each accordion div tab but I don't know how to implement it correctly. I could be 100% wrong, if so please correct me!
I've done about 15 searches on this and only found one answer, which wasn't very detailed or helpful. Any help or pointers to learn how to do this would be much appreciated.
(The reason I renamed it to #collapse41 is because I have multiple accordions on the same page.)
<div class="accordion" id="accordion2">
<?php
include 'db.php'; //connect to database
$result = mysql_query("SELECT * FROM teams ORDER BY wins DESC LIMIT 5");
$rank = 1;
if (mysql_num_rows($result)) {
while ($row = mysql_fetch_assoc($result)) {
echo "<div class='accordion-group'>";
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion4' href='#collapse41'>";
echo "<td>{$row['name']} <br /> </td>";
echo "</a>";
echo "</div>";
echo "<div id='collapse41' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";
echo "<td>Rank: {$rank} <br /> </td>";
echo "<td>Wins: {$row['wins']} <br /> </td>";
echo "<td>Losses: {$row['losses']} <br /> </td>";
echo "</div>";
echo "</div>";
echo "</div>";
$rank++;
}
}
?>
</div>

Answer 1

You have to break the loop up....and loop once to get headings, and twice to get body...
So you need to echo the group div first....
echo "<div class='accordion-group'>";
Then start the loop to output headings...
Then run another loop to output divs....
if (mysql_num_rows($result)) {
//LOOP 1
while ($row = mysql_fetch_assoc($result)) {
//Build heading pieces
echo "<div class='accordion-heading'>";
echo "<a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion-".$row['id']." href='#accordian-".$row['id']."'>";
echo "<td>{$row['name']} <br /> </td>";
echo "</a>";
echo "</div>";}
//LOOP 2
//Build inner pieces
while ($row = mysql_fetch_assoc($result)) {
echo "<div id='accordian-".$row['id']."' class='accordion-body collapse'>";
echo "<div class='accordion-inner'>";
echo "<td>Rank: {$rank} <br /> </td>";
echo "<td>Wins: {$row['wins']} <br /> </td>";
echo "<td>Losses: {$row['losses']} <br /> </td>";
echo "</div>";
echo "</div>"; }
echo "</div>";
$rank++;
}
}
Im not actually too sure of how your accordian is to be structured, so this may or may not be correct information, but whenever I do twiiter-bootstrap accordians, this is how I do it. If you could post your expected HTML output (template for accordian), that would help me greatly, and I can revamp my answer to suit what you actually need