Collapse-O-Matic – Table Test

Various ways the Collapse-O-Matic plugin may be used in conjunction with tables.

Expanding The Entire Table

This is straight forward. We simply wrap a table in an expand element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td>Three</td><td>Four</td></tr>
   </tbody>
</table>

Expanding A Row

This is a bit more tricky. Notice, what happens when we wrap to wrap a table row in a div:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <div style="border: 1px dotted blue">
         <tr><td>Three</td><td>Four</td></tr>
      </div>
   </tbody>
</table>

One	Two
Three	Four

Se how the div is rendered outside of the table? To place the div INSIDE of the table, the div needs to be wrapped in td tags like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr>
         <td colspan="2">
            <div style="border: 1px dotted blue">
               <table>
                  <tbody>
                     <tr><td>Three</td><td>Four</td></tr>
                  </tbody>
                </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

One	Two
Three Four

Well, now the row we want to use as the target content is inside the table, but as you can see, the inner table is not matching the column layout. So what if we use the table’s TR as the collapse element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
   </tbody>
</table>

One	Two
Trigger
Three	Four

Perfect! This works well for expanding and collapsing a SINGLE Table Row.

Expanding Multiple Rows

Collapse-O-Matic only allows a trigger to control a single target area. One of the many features of the pro version, Collapse-Pro-Matic is the added ability to have a single trigger control multiple targets. To add extra targets to a trigger, the ID must be in the format of target[n]-id as follows:

<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

So in our example of the table, we would hook up multiple rows like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target1-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
      <tr class="collapseomatic_content" id="target2-singlerow">
          <td>Five</td><td>Six</td>
      </tr>
      <tr class="collapseomatic_content" id="target3-singlerow">
          <td>Seven</td><td>Eight</td>
      </tr>
   </tbody>
</table>

One	Two
Trigger
Three	Four
Five	Six
Seven	Eight