Formatting Collapsible inside of a Table-CodePudding

This is in reference to a question I posted yesterday about collapsibles, and I'm having an issue running into spacing (and possibly formatting if I'm doing it wrong).

All of my coding works fine, if I want all of the objects beneath the collapsible portion to appear in a list vertically. They're normally spaced in a table such as the one below so they can go three across vertically down the page as far as needed. This appears in my jfiddle but doesn't work. It seems to 'bounce' but not actually collapse or expand the content and I'm not 100% sure how to fix it.

$('.expand-two').click(function() {
  $('.content-two').slideToggle('slow');
});

p.content-one {
  display: block;
}

p.content-two {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <p class="expand-two">
        <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p>
    </td>
    <tr>
      <p class="content-two">
        <td width="33%" align="center" valign="top">
          <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
            <font color="#34a6a7">[ c h a o s ]</font>
          </a><br>
          <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br>
        </td>
        <td width="33%" align="center" valign="top">
          <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">
            <font color="#34a6a7">[ r e a l i t i e s ]</font>
          </a><br>
          <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br>
          <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br>
          <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br>
        </td>
        <td width="33%" align="center" valign="top">
          <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">
            <font color="#34a6a7">[ w a r z o n e ]</font>
          </a><br>
          <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br>
        </td>
      </p>
    </tr>
  </tr>
</table>

Working Fiddle https://jsfiddle.net/zwom1ba0/

EDIT

I mean My rows are laid out like

item 1             item 2             item3
item 4             item 5             item6

Etc, but when put in a div without the table coding, it all works but the items in each div simply appear like

"item1"
"item2"
"item3"
"item4"

etc

CodePudding user response：

The problem is <p > is in between <tr> -> <td>

The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

Besides, your first <tr> tag is not closed with </tr>, then comes another <tr>

Suggested solution:

Split two table rows into two tables, so that the second part can apply sliding effect.

<table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <p class="expand-two">
        <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p>
    </td>
  </tr>
</table>
<div class="content-two">
  <table border="0" width="750" >
    <tr>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
          <font color="#34a6a7">[ c h a o s ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br>
      </td>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">
          <font color="#34a6a7">[ r e a l i t i e s ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br>
        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br>
        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br>
      </td>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">
          <font color="#34a6a7">[ w a r z o n e ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br>
      </td>
    </tr>
  </table>
</div>