I'm almost done making this multi-dimensional table for my project, but I'm running into a snag where when I go to open the 3rd Dimension, it immediately closes upon open.
It's an issue very closely like this issue but this person was using jQuery for their Accordion, and while I am using jQuery in my project, I am using the Accordion from Semantic UI, so this solution didn't apply to me.
Here's the jsFiddle for a sample of the whole table that I've been using to model everything else.
<table class="ui celled table accordion">
<thead>
<tr>
<th></th>
<th>Sequence Number</th>
<th>Component</th>
<th>Description</th>
<th>Component Type</th>
<th>Quantity</th>
<th>Make/Buy/Supply</th>
<th>Unit of Measure</th>
</tr>
</thead>
<tbody>
<tr class="ui title">
<td><i class="dropdown icon"></i></td>
<td>null</td>
<td>S100000</td>
<td>null</td>
<td>N</td>
<td>null</td>
<td>null</td>
<td>null</td>
</tr>
<tr style="display:none">
<td colspan="8" class="ui content">
<table class="ui inverted celled table accordion">
<tbody>
<tr class="ui title" id="BILI-5-0">
<td><i class="dropdown icon"></i></td>
<td>null</td>
<td>S150000</td>
<td>null</td>
<td>P</td>
<td>null</td>
<td>null</td>
<td>null</td>
</tr>
<tr style="display:none">
<td colspan="8" class="ui content">
<table class="ui celled table">
<tbody>
<tr id="BILI-5-0-0">
<td></td>
<td>null</td>
<td>S154000</td>
<td>null</td>
<td>N</td>
<td>null</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
From my research into the issue, I think it has something to do with multiple initializations of Accordions; however simply removing the 'ui' from the 2nd layer causes the 2nd table to not initialize. I've also tried moving the Accordion to 1 layer out and 1 layer in, while this does solve the 1st problem of immediate closing, this causes the 2nd table's formatting to disappear when opening the 3rd. As such, I'm not sure what I can do to resolve these multiple initializations without ruining my table layout.
Please ignore the numerous 'null' data points, that's an issue I'm also working on with my SQL Query but have more of a handle over; this issue I'm asking about has taken a higher precedent.
So I've had to come back to this because the client asked for the table itself to be inside an accordion, because of course they did.
Turns out, you don't need to specify the accordion each time. Let me explain. Here's my working example:
<div class="ui accordion">
<div class="ui title">
<h3><strong>BILI<i class="dropdown icon"></i></strong></h3>
</div>
<div class="ui content">
<table class="ui celled table">
<thead>
<tr>
<th class="one wide"></th>
<th class="two wide">Sequence Number</th>
<th class="two wide">Component</th>
<th class="four wide">Description</th>
<th class="one wide">Component Type</th>
<th class="one wide">Quantity</th>
<th class="one wide">Make/Buy/Supply</th>
<th class="one wide">Unit of Measure</th>
</tr>
</thead>
<tbody>
<tr class="ui title">
<td class="one wide"><i class="dropdown icon"></i></td>
<td class="two wide">null</td>
<td class="two wide">S100000</td>
<td class="four wide">null</td>
<td class="one wide">N</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
</tr>
<tr style="display:none">
<td colspan="8" class="ui content">
<table class="ui inverted celled table">
<tbody>
<tr class="ui title" id="BILI-5-0">
<td class="one wide"><i class="dropdown icon"></i></td>
<td class="two wide">null</td>
<td class="two wide">S150000</td>
<td class="four wide">null</td>
<td class="one wide">P</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
</tr>
<tr style="display:none">
<td colspan="8" class="ui content">
<table class="ui celled table">
<tbody>
<tr id="BILI-5-0-0">
<td class="one wide"></td>
<td class="two wide">null</td>
<td class="two wide">S154000</td>
<td class="four wide">null</td>
<td class="one wide">N</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
<td class="one wide">null</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of the typical:
<div class="ui accordion">
<div class="ui title">Layer 1</div>
<div class="ui content">
<div class="accordion">
<div class="ui title">Layer 2</div>
<div class="ui content">Hello World!</div>
</div>
</div>
</div>
You can instead do:
<div class="ui accordion">
<div class="ui title">Layer 1</div>
<div class="ui content">
<div class="ui title">Layer 2</div>
<div class="ui content">Hello World!</div>
</div>
</div>
This only seems to work for tables, as I couldn't get a purely text version to work, but it's important for nested tables since it bypasses the problem where you have to initialize the inner accordions because you have to initialize the tables which are also accordions.
I think, anyways. I figured I'd at least answer my own question with what ended up working for me.