I have been trying to pull a list of states, cities and a count from a database and display them like below. Hitting the more button will expand the rest of the cities in each state. Unfortunately, all the states and their cities and counts have been in same display column and I can't separate the states from each other. I can't seem to separate the states with their specific cities into separate columns. Any help is greatly appreciated.
Alaska(46)
Anchorage(22)
Eagle River(2)
Elmendorf Afb(1)
Fairbanks(7)
Juneau(4)
More...
After hitting more link:
Alaska(46)
Anchorage(22)
Eagle River(2)
Elmendorf Afb(1)
Fairbanks(7)
Juneau(4)
Ketchikan(1)
Kodiak(1)
Alabama(54) <-- next state loaded in output, I want this separate
Auburn(1)
Bessemer(1)
Birmingham(52)
Less...
Here is my query:
$query = "
SELECT
stateAbv,
stateName,
'' AS cityName,
count(*) AS state_count
from
my_data
GROUP BY stateAbv, stateName
union
SELECT
stateAbv,
stateName,
city AS cityName,
COUNT(*) AS city_count
FROM
my_data
GROUP BY stateAbv, stateName,
city
ORDER BY stateAbv,
cityName asc
";
$sqlResult = mysqli_query($con, $query);
$i = 0;
while ($row = mysqli_fetch_array($sqlResult)) {
if ($i++ == 6) break;
if ($row['cityName']) {
echo $row['cityName'] . "(" . $row['state_count'] . ")" . "<br/>";
} else {
echo $row['stateName'] . "(" . $row['state_count'] . ")" . "<br/>";
}
}
echo "<a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>";
echo "<div class='detail-section' style='display: none;'>";
while ($row = mysqli_fetch_array($sqlResult)) {
if ($i++ > 6) {
if ($row['cityName']) {
echo $row['cityName'] . "(" . $row['state_count'] . ")" . "<br/>";
} else {
echo $row['stateName'] . "(" . $row['state_count'] . ")" . "<br/>";
}
}
}
echo "<a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a>";
echo "</div>";
?>
Here is my js to expand/collapse the list:
<script>
$(document).ready(function(){
$(".more-detail").click(function(){
$(".detail-section").css("display", "block");
$(".more-detail").css("display", "none");
});
$(".less-detail").click(function(){
$(".detail-section").css("display", "none");
$(".more-detail").css("display", "block");
});
});
</script>