PHP/MySQL category div wrapping issue - php

Question

I'm fairly certain I'm overlooking something obvious, but here it goes.
I'm working with two tables in MySQL, one for categories and the other for works. I've successfully joined the tables together and am referencing both with mysql_fetch_array. (I am aware this is deprecated.)
I am also able to successfully display the category name once, followed by all of the works in that category.
I run into an issue, however, with wrapping a div around all of the entries in a category. The reason I want to wrap one div around the entries is I'm using collapsibles to keep the information organized. The category name serves as trigger for the collapsible, and the works are expanded/collapsed when the user clicks the category name.
(I'm also opening each image in a FancyBox, but that's irrelevant to my question.)
Here is my code:
$sql = "SELECT *
FROM gallery
LEFT JOIN gallery_categories ON gallery.category=gallery_categories.category_id
ORDER BY category ASC";
$result = mysql_query($sql) or print ("Can't join tables.<br />" . $sql . "<br />" . mysql_error());
$category = null;
while($row = mysql_fetch_array($result)){
$id = $row['id'];
$title = stripslashes($row['title']);
$image = stripslashes($row['image']);
$timestamp = stripslashes($row['timestamp']);
if ($category != $row['category']) {
$category = $row['category'];
?>
<div class="page_collapsible" id="<?php echo $row['category_id']; ?>"><h3><div class="title"><?php echo $row['category_name']; ?></div></h3></div>
<div class="gallery-grid">
<div class="item">
<div class="content"><a class="fancybox" href="images/works/<?php echo $image ?>" title="<?php echo $title ?>, <?php echo $timestamp ?>"><img src="images/thumbs/<?php echo $image ?>" class="thumb" /><div class="thumb-border"></div></a></div>
</div>
</div>
<?php
}
}
The page_collapsible class contains the collapsible trigger. The gallery-grid class is the wrapper for the content to be collapsed. The item class contains information about each entry in the works table.
The problem I run into is the code only iterates the first row in the works table that matches the category. I have tried removing the IF statement for the category display and instead tried GROUP BY, but ran into the same problem. If I move the item class and the </div> for the gallery-grid class outside of the IF statement, each entry in the works table is displayed successfully, but the gallery-grid class wraps each subsequent category and corresponding entries. If I move the item class but leave the </div> for the gallery-grid class where it is currently, the collapsible content is blank, and the entries are outside of the collapsible, though properly displayed under their corresponding category.
Ultimately, how do I wrap all of the entries in a given category ONCE, while displaying ALL entries in a given category?

Answer 1

As far as I understand your question, aren't you looking for something like this?
You need to write the start/end of the wrapper only when category changes (preserve order by category). The items are written unconditionally in every loop pass.
Note if($category != null){...} is because of not closing the first wrapper and the last </div> outside the loop is for closing the last wrapper
while($row = mysql_fetch_array($result)){
$id = $row['id'];
$title = stripslashes($row['title']);
$image = stripslashes($row['image']);
$timestamp = stripslashes($row['timestamp']);
if ($category != $row['category']) {
if($category != null){
?>
</div>
<?php
}
$category = $row['category'];
?>
<div class="page_collapsible" id="<?php echo $row['category_id']; ?>"><h3><div class="title"><?php echo $row['category_name']; ?></div></h3></div>
<div class="gallery-grid">
<?php
}
?>
<div class="item">
<div class="content"><a class="fancybox" href="images/works/<?php echo $image ?>" title="<?php echo $title ?>, <?php echo $timestamp ?>"><img src="images/thumbs/<?php echo $image ?>" class="thumb" /><div class="thumb-border"></div></a></div>
</div>
<?php
}
?>
</div>