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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Guy Hengel [angelIII / a3]Billing EngineerCommented:
and the exact/actual question is what, please?
MurfurFull 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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.