FOREACH PHP with accordion display question

I have a php file that grabs data from a database and returns rows of data. It's a shopping cart, and I need to have an expand and collapse on each of the tables in order to have minimal page space taken up, unless they expand each table. The table has the following data, and the data ranges in results. Right now, there are 11 tables that display with different results, and I need the main tables to be able to expand and collapse when the user clicks EXPAND or COLLAPSE. The tables have a table name, then 4 columns below with Qty, Image, Name, and Price below. I want Expand/collapse arrows on the left and right of the Table names. Please see the attached file for reference.

				<?php if ($option['type'] == 'multiple') { ?>
					<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
					  <table width="100%">
					    <tr style="background: #dddddd; line-height: 20px; font-weight: bold;">
							<td width="60px" style="text-align:center;"><?php echo $text_qty; ?></td>
							<td width="50px"><?php echo "Image:"; ?></td>
							<td style="text-align:center;"><?php echo $option['name']; ?>:</td>
							<td width="100px" style="text-align:center;"><?php echo $text_price; ?></td>
					  <?php foreach ($option['option_value'] as $option_value) { ?>
					    <tr style="background: #eeeeee;">
						  <td style="text-align:center;"><input type="text" name="oquantity[<?php echo $option['product_option_id']; ?>][<?php echo $option_value['product_option_value_id']; ?>]" size="2" value="0" /></td>
						  <td style="text-align:center;"><?php if ($option_value['image']) { ?><a rel="colorbox" href="<?php echo $option_value['imagelarge']; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $option_value['image']; ?>" /></a><?php } ?></td>
						  <td style="text-align:center;"><?php echo $option_value['name']; ?></td>
						  <td style="text-align:center;"><b><?php echo $option_value['price']; ?></b></td>

					  <?php } ?>
					  <span style="font-weight:bold; text-align:center;"><?php echo $option['name']; ?> </span>
                <?php } ?>

Open in new window

(edited to use the Code Snippet for the code. ~Ray)
Who is Participating?
MurfurConnect With a Mentor Full Stack DeveloperCommented:
Sounds like you want an accordion. There are several out there for you to choose from but I personally prefer the jQuery one - see here:

Use an outer layer to hold the whole accordion and the span with the option name as the trigger although you need to move it above the table it represents as the accordion trigger toggles visibility of the element that immediately follows the trigger - hence I have moved the <hr> inside the span. You also need to add display:block to the span style otherwise the table names go inline after the first transition. Or you could change your spans to divs which are already block elements.

The default trigger is the first element inside the accordion, i.e. the span containing the option name and it always acts on the sibling that immediately follows, in your case the div id=option-<?#= $option['product_option_id']; ?>

But you can also add triggers outside the accordion with simple hrefs with onclick to pass the item id to the accordion remembering that ids start at 0, not 1 :)

To take it an extreme, you can also nest accordions within others e.g. displaying content grouped by months and years. I did this for a client project and as a result the client's site was considerably neater by only displaying months that actually had data to show and then only one month of rows at a time. Click on any month in that year to see the relevant rows or jump to a different year without having to scroll downwards forever to find the specific month/year to see.

A lot of if statements and nested loops but very effective in the end.

I've commented out your PHP but left it in place and added sample text in its place in the attached example.
Guy Hengel [angelIII / a3]Billing EngineerCommented:
and the exact/actual question is what, please?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.