Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : General Discussion > Collapsible tables?
chill808 (Applicant) 6/8/2010 2:46 PM EST : Collapsible tables?
chill808
Posts: 34

0
Like

0
Dislike

I was wondering if anyone know if and how to make collapsible tables. I've been searching all over the internet and the best I could come up with is putting class="collapsible" in the <table> tag but that doesn't work. I tried adding a .css file and .js with code from a site and still nothing. I'm trying to get a professions table to collapse to just show the names of professions, then be able to click for them to open and show which members have that profession. Don't know if this is possible with guildportal and if not I guess I'll move on to try something else.


ninjaswithplate.guildportal.com
TopBottom

Mottie (SuperAdmin) 6/8/2010 5:50 PM EST : RE: Collapsible tables?
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Chill808!

Well, you do have a few choices for this:
  1. Install the Forum Modules script and use the hide-show box (). Even though the module only works in the forums, you can copy & paste the script it makes to display content anywhere. Here is an example:

    Click me for more info


  2. Or you could use this script - add it to the same page where you have the collapsible tables (in a Free Form Text/HTML widget) or into the footer area (Control Panel > Custom HTML & Script > Footer Area)

    This script makes the first row clickable of any table you add the "collapsible" class to, when the table is collapsed, it has an additional class "collapsed" in case you want to add a different background image to the table while it is collapsed.
    <script type="text/javascript">
    $(document).ready(function(){
     // make first row clickable to collapse the rest of the table
     $('table.collapsible').find('tr:eq(0)').click(function(){
      var tbl = $(this).closest('table');
      if ( tbl.is('.collapsed') ) {
       $(this).nextAll().show();
       tbl.removeClass('collapsed');
      } else {
       $(this).nextAll().hide();
       tbl.addClass('collapsed');
      }
     })
    })
    </script>
    Here is the HTML that goes with the script (you don't have to use <th> instead of <td> for the table cells, I just did so the top row looks different).
    <table class="collapsible">
     <tr>
      <th>Column 1</th>
      <th>Column 2</th>
     </tr>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
     </tr>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
     </tr>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
     </tr>
     <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
     </tr>
    </table>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

chill808 (Applicant) 6/9/2010 12:03 PM EST : RE: Collapsible tables?
chill808
Posts: 34

0
Like

0
Dislike

Ok got it to work, thanks for the help. So I put up what I'm trying to do on this page, and what I want is to be able to collapse each profession so it's a little more clean. Any ideas?
TopBottom

Mottie (SuperAdmin) 6/9/2010 5:57 PM EST : RE: Collapsible tables?
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Chill808!

Maybe that would look better as an accordion menu... try replacing the whole table with this:
<style type="text/css">
 /* A few IE bug fixes */
 * #professions, #professions li ul { margin: 0; padding: 0; }
 * html #professions li a { height: 100%; }
 * html #professions ul li { margin-bottom: -1px; }
 * html #professions ul li a { height: 100%; margin: 2px auto; }
 /* Some list and link styling */
 #professions, #professions ul { list-style-type: none; padding: 0px 5px; cursor: pointer; width: 180px; text-indent: 0 }
 #professions ul li { border: 0px; margin: 2px 5px; list-style-type: none; position: static;}
 #professions ul li:hover { background: #555; }
 #professions ul li span { float: right; }
 #professions div { background: #333; margin-left: 0; }
 #professions h4 { width: 100%; font-size: 12px; cursor: pointer; margin: 0; }
 #professions h4:hover { background: #333333; border: 0px; }
 #professions h4.selected { background: #00496c; }
</style>
<script type="text/javascript">
$(document).ready(function() {
// make accordion
 $('#professions h4')
  .addClass('ContentBoxTitle')
  .click(function(){
  var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(300);
  $('#professions h4').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(300);
   }
  })
 }).next().hide();
})
</script>

<div id="professions">

<h4>Alchemy</h4>
<ul>
 <li>Adamwestt<span>450</span></li>
 <li>Aidsface<span>450</span></li>
 <li>Azeaze<span>450</span></li>
 <li>Dianaferi<span>450</span></li>
 <li>Nitrotech<span>450</span></li>
 <li>Octerron<span>437</span></li>
 <li>Rhinopotamus<span>450</span></li>
 <li>Ronen<span>450</span></li>
 <li>Sirloin<span>450</span></li>
 <li>Sunderstruck<span>444</span></li>
 <li>Vladimpaler<span>444</span></li>
</ul>

<h4>Blacksmithing</h4>
<ul>
 <li>Blackhack<span>450</span></li>
 <li>Dyroke<span>420</span></li>
 <li>Grendl<span>446</span></li>
 <li>Kylarstern<span>433</span></li>
 <li>Leben<span>443</span></li>
 <li>Mariabrink<span>405</span></li>
 <li>Panzerzwei<span>423</span></li>
</ul>

<h4>Blacksmithing (Armor)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Blacksmithing (Weapons)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Cooking</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Enchanting</h4>
<ul>
 <li>Arwene<span>450</span></li>
 <li>Brugeria<span>450</span></li>
 <li>Chriis<span>460</span></li>
 <li>Dethfromafar<span>436</span></li>
 <li>Felranthe<span>450</span></li>
 <li>Ggifter<span>460</span></li>
 <li>Morpious<span>402</span></li>
 <li>Muertojohn<span>450</span></li>
 <li>Padruig<span>407</span></li>
 <li>Rememdium<span>450</span></li>
 <li>Siobhants<span>460</span></li>
 <li>Spartainian<span>450</span></li>
</ul>

<h4>Engineering</h4>
<ul>
 <li>Bro<span>450</span></li>
 <li>Chairfighter<span>428</span></li>
 <li>Chewbaka<span>418</span></li>
 <li>Gobul<span>430</span></li>
 <li>Madec<span>441</span></li>
 <li>Velithsong<span>428</span></li>
</ul>

<h4>Engineering (Gnome)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Engineering (Goblin)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>First Aid</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Fishing</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Herbalism</h4>
<ul>
 <li>Adamwestt<span>450</span></li>
 <li>Aidsface<span>450</span></li>
 <li>Bbrack<span>450</span></li>
 <li>Dianaferi<span>450</span></li>
 <li>Draskas<span>465</span></li>
 <li>Flagrent<span>450</span></li>
 <li>Huulharnen<span>422</span></li>
 <li>Jankin<span>450</span></li>
 <li>Jaxxaholic<span>465</span></li>
 <li>Knewbhunter<span>425</span></li>
 <li>Nitrotech<span>450</span></li>
 <li>Octerron<span>450</span></li>
 <li>Reldaqa<span>450</span></li>
 <li>Rhinopotamus<span>450</span></li>
 <li>Sirloin<span>465</span></li>
 <li>Spatial<span>465</span></li>
 <li>Sunderstruck<span>465</span></li>
 <li>Unhiel<span>450</span></li>
</ul>

<h4>Inscription</h4>
<ul>
 <li>Draskas<span>450</span></li>
 <li>Flagrent<span>442</span></li>
 <li>Huulharnen<span>435</span></li>
 <li>Jankin<span>450</span></li>
 <li>Reldaqa<span>432</span></li>
 <li>Spartainian<span>450</span></li>
</ul>

<h4>Jewelcrafting</h4>
<ul>
 <li>Divina<span>450</span></li>
 <li>Dvno<span>450</span></li>
 <li>Felranthe<span>450</span></li>
 <li>Ihatedks<span>450</span></li>
 <li>Jlife<span>450</span></li>
 <li>Juujuu<span>450</span></li>
 <li>Methlab<span>450</span></li>
 <li>Omgcakes<span>448</span></li>
 <li>Shocklust<span>442</span></li>
 <li>Tunneler<span>409</span></li>
 <li>Wene<span>450</span></li>
</ul>

<h4>Leatherworking</h4>
<ul>
 <li>Aentreri<span>440</span></li>
 <li>Galivas<span>430</span></li>
 <li>Mexxilover<span>444</span></li>
 <li>Mildis<span>440</span></li>
 <li>Retniw<span>442</span></li>
 <li>Shreddar<span>430</span></li>
 <li>Shrewdd<span>450</span></li>
 <li>Slapps<span>445</span></li>
 <li>Wigsplitta<span>413</span></li>
</ul>

<h4>Leatherworking (Dragon)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Leatherworking (Elemental)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Leatherworking (Tribal)</h4>
<ul>
 <li>Nothing Listed</li>
</ul>

<h4>Mining</h4>
<ul>
 <li>Adophcritler<span>450</span></li>
 <li>Arwene<span>450</span></li>
 <li>Blackhack<span>450</span></li>
 <li>Bridgeblood<span>450</span></li>
 <li>Bro<span>450</span></li>
 <li>Brutilpally<span>450</span></li>
 <li>Chewbaka<span>450</span></li>
 <li>Colossians<span>450</span></li>
 <li>Darkedonn<span>450</span></li>
 <li>Darkrai<span>450</span></li>
 <li>Divina<span>450</span></li>
 <li>Dreadspell<span>425</span></li>
 <li>Dvno<span>450</span></li>
 <li>Dyroke<span>433</span></li>
 <li>Ellenea<span>450</span></li>
 <li>Estalies<span>450</span></li>
 <li>Gobul<span>450</span></li>
 <li>Grendl<span>450</span></li>
 <li>Gröm<span>432</span></li>
 <li>Hölykiller<span>450</span></li>
 <li>Ihatedks<span>450</span></li>
 <li>Jlife<span>450</span></li>
 <li>Juujuu<span>450</span></li>
 <li>Leben<span>450</span></li>
 <li>Madec<span>450</span></li>
 <li>Mariabrink<span>450</span></li>
 <li>Methlab<span>450</span></li>
 <li>Morpious<span>450</span></li>
 <li>Naib<span>450</span></li>
 <li>Omgcakes<span>450</span></li>
 <li>Ownsurlife<span>450</span></li>
 <li>Padruig<span>450</span></li>
 <li>Reckten<span>450</span></li>
 <li>Robotmaddnes<span>450</span></li>
 <li>Shocklust<span>450</span></li>
 <li>Stog<span>450</span></li>
 <li>Traevel<span>450</span></li>
 <li>Triplexx<span>423</span></li>
 <li>Unhealz<span>450</span></li>
 <li>Velithsong<span>450</span></li>
 <li>Wene<span>450</span></li>
 <li>Õbliviõn<span>450</span></li>
</ul>

<h4>Skinning</h4>
<ul>
 <li>Aentreri<span>450</span></li>
 <li>Bridgeblood<span>450</span></li>
 <li>Chatharia<span>450</span></li>
 <li>Chriis<span>450</span></li>
 <li>Dionyseus<span>450</span></li>
 <li>Dreadspell<span>442</span></li>
 <li>Durple<span>450</span></li>
 <li>Galivas<span>450</span></li>
 <li>Jaxxaholic<span>450</span></li>
 <li>Jaydensmom<span>450</span></li>
 <li>Mexxilover<span>450</span></li>
 <li>Mildis<span>450</span></li>
 <li>Proclaim<span>450</span></li>
 <li>Razzl<span>450</span></li>
 <li>Robotmaddnes<span>450</span></li>
 <li>Shreddar<span>450</span></li>
 <li>Shrewdd<span>450</span></li>
 <li>Sickism<span>450</span></li>
 <li>Slapps<span>450</span></li>
</ul>

<h4>Tailoring</h4>
<ul>
 <li>Azeaze<span>4??</span></li>
 <li>Bloodcorpse<span>450</span></li>
 <li>Brugeria<span>444</span></li>
 <li>Deadlytwink<span>425</span></li>
 <li>Dethfromafar<span>447</span></li>
 <li>Ggifter<span>450</span></li>
 <li>Muertojohn<span>450</span></li>
 <li>Nichlos<span>450</span></li>
 <li>Proclaim<span>428</span></li>
 <li>Sathust<span>450</span></li>
 <li>Tunneler<span>439</span></li>
 <li>Unhealz<span>443</span></li>
 <li>Voldamore<span>420</span></li>
</ul>
</div>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

chill808 (Applicant) 6/10/2010 2:38 AM EST : RE: Collapsible tables?
chill808
Posts: 34

0
Like

0
Dislike

Holy cow Mottie I didn't think you would do all that. It's exactly what I was looking for, you're amazing. I owe you a beer!
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%