Add Expandable/Collapsible text in Blocks

[OblivionMage]

I have searched for a way to effectively do this and all it has given me so far are php errors. How can I make a TP Block that allows for expandable/collapsible text (With expandable/collapsible text under that)?

The only example I can really give is;
http://www.mmo-champion.com/

The sideblock there uses some form of it (Left side).

I know that there are tons of ways to do this, but I haven't been able to find one that has worked with TP Blocks.

[IchBin]

Did you searched in the block code snippets board? I think there was something in there similar at one point. If you don't find anything, I can only suggest you search a script site like dynamic drive or something and find a script that does what you need. Then post here for someone to show you how to get it to work in TP.

[Lesmond]

found this  here, there are one or two there

[laric]

I use this in a block on the side in a script box..
I hope it is rather clear on how this works.

Code Select Expand


<script type='text/javascript' src='/animatedcollapse.js'>
/***********************************************
* Animated Collapsible DIV- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/</script>
<a href='javascript:collapse1.slideit()'>
<img border='0' src='/raid/games/WoW/images/raids/karazhan.png' alt='Karazhan'/></a>
<a href='javascript:collapse2.slideit()'><img border='0' src='/raid/games/WoW/images/raids/gruul.png' alt='Gruul's Lair'/></a>
<a href='javascript:collapse3.slideit()'><img border='0' src='/raid/games/WoW/images/raids/mag.png' alt='Magtheridon'/></a>
<a href='javascript:collapse4.slideit()'><img border='0' src='/raid/games/WoW/images/raids/za.png' alt='Zul'Aman'/></a>
<a href='javascript:collapse5.slideit()'><img border='0' src='/raid/games/WoW/images/raids/coilfang.png' alt='Coilfang Reservoir'/></a>
<a href='javascript:collapse6.slideit()'><img border='0' src='/raid/games/WoW/images/raids/tempest.png' alt='Tempest Keep'/></a>
<a href='javascript:collapse7.slideit()'><img border='0' src='/raid/games/WoW/images/raids/cot.png' alt='Mount Hyjal'/></a>
<a href='javascript:collapse8.slideit()'><img border='0' src='/raid/games/WoW/images/raids/blacktemple.png' alt='Black Temple'/></a>
<div id='karazhan'>
<table style='width: 100%'><tr><td class="tbcphp">Attumen</td>
<td align='right' class="tbcphp">2007-02-25</td></tr><tr><td  class="tbcphp">Servant<br />
Quarters</td><td align='right' class="tbcphp">2007-02-26</td></tr><tr>
<td class="tbcphp">Moroes</td><td align='right' class="tbcphp">2007-02-28</td></tr><tr>
<td class="tbcphp">Maiden</td><td align='right' class="tbcphp">2007-03-12</td></tr><tr>
<td class="tbcphp">Opera</td><td align='right' class="tbcphp">2007-04-10</td></tr><tr>
<td class="tbcphp">Curator</td><td align='right' class="tbcphp">2007-04-03</td></tr><tr>
<td class="tbcphp">Terestian
<br />
Illhoof</td><td align='right' class="tbcphp">2007-05-28</td></tr><tr>
<td class="tbcphp">Shade of<br />
Aran</td><td align='right' class="tbcphp">2007-04-10</td></tr><tr>
<td class="tbcphp">Netherspite</td><td align='right' class="tbcphp">2007-06-07</td></tr><tr>
<td class="tbcphp">Prince<br />
Malzhezaar</td><td align='right' class="tbcphp">2007-05-09</td></tr><tr>
<td class="tbcphp">Nightbane</td><td align='right' class="tbcphp">2007-06-07</td></tr>
</table>
</div>
<div id='gruul'>
<table style='width: 100%'><tr><td class="tbcphp">Maulgar</td>
<td align='right' class="tbcphp">2007-06-13</td></tr><tr><td class="tbcphp">Gruul</td>
<td align='right' class="tbcphp">2007-08-01</td></tr>
</table>
</div>
<div id='magtheridon'>
<table style='width: 100%'>
<tr><td class="tbcphp">Magtheridon</td><td align='right' class="tbcphp">2008-04-02</td></tr>
</table>
</div>
<div id='zulaman'>
<table style='width: 100%'>
<tr><td class="tbcphp">Nalorakk</td><td align='right' class="tbcphp">2007-11-16</td></tr><tr>
<td class="tbcphp">Akil'zon</td><td align='right' class="tbcphp">2007-11-16</td></tr><tr>
<td class="tbcphp">Jan'alai</td><td align='right' class="tbcphp">2007-11-21</td></tr><tr>
<td class="tbcphp">Halazzi</td><td align='right' class="tbcphp">2007-11-16</td></tr><tr>
<td class="tbcphp">Malacrass</td><td align='right' class="tbcphp">2008-04-14</td></tr><tr>
<td class="tbcphp">Zul'jin</td><td align='right' class="tbcphp">2008-04-15</td></tr>
</table>
</div>
<div id='coilfang'>
<table style='width: 100%'>
<tr><td class="tbcphp">Hydross</td><td align='right' class="tbcphp">2007-11-19</td></tr><tr>
<td class="tbcphp">Lurker</td><td align='right' class="tbcphp">2007-11-19</td></tr><tr>
<td class="tbcphp">Morogrim</td><td align='right' class="tbcphp">2008-01-18</td></tr><tr>
<td class="tbcphp">Karathress</td><td align='right' class="tbcphp">2008-01-24</td></tr><tr>
<td class="tbcphp">Leotheras</td><td align='right' class="tbcphp">2008-01-30</td></tr><tr>
<td class="tbcphp">Lady Vashj</td><td align='right' class="tbcphp">Not yet</td></tr>
</table>
</div>
<div id='tempest'>
<table style='width: 100%'>
<tr><td class="tbcphp">Void Reaver</td><td align='right' class="tbcphp">2007-08-21</td></tr><tr>
<td class="tbcphp">Solarian</td><td align='right' class="tbcphp">2007-11-18</td></tr><tr>
<td class="tbcphp">Al'Ar</td><td align='right' class="tbcphp">2008-03-12</td></tr><tr>
<td class="tbcphp">Kael'Thas</td><td align='right' class="tbcphp">Not yet</td></tr>
</table>
</div>
<div id='cot'>
<table style='width: 100%'>
<tr><td class="tbcphp">Rage Winterchill</td><td align='right' class="tbcphp">2008-04-16</td></tr>
<tr><td class="tbcphp">Anetheron</td> <td align='right' class="tbcphp">2008-08-13</td></tr>
<tr><td class="tbcphp">Kaz'Rogal</td> <td align='right' class="tbcphp">2008-04-14</td></tr>
<tr><td class="tbcphp">Azgalor</td> <td align='right' class="tbcphp">2008-08-28</td></tr>
<tr><td class="tbcphp">Archimonde</td> <td align='right' class="tbcphp">Not yet</td></tr>
</table>
</div>
<div id='bt'>
<table style='width: 100%'>
<tr><td class="tbcphp">Naj'entus</td><td align='right' class="tbcphp">2008-07-23</td></tr>
<tr><td class="tbcphp">Supremus</td> <td align='right' class="tbcphp">2008-07-28</td></tr>
<tr><td class="tbcphp">Shade of Akama</td> <td align='right' class="tbcphp">2008-07-28</td></tr>
<tr><td class="tbcphp">Gorefiend</td> <td align='right' class="tbcphp">2008-08-21</td></tr>
<tr><td class="tbcphp">Bloodboil</td> <td align='right' class="tbcphp">Not yet</td></tr>
<tr><td class="tbcphp">Reliquary</td> <td align='right' class="tbcphp">Not yet</td></tr>
<tr><td class="tbcphp">Mother Shahraz</td> <td align='right' class="tbcphp">Not yet</td></tr>
<tr><td class="tbcphp">Illidari Council</td> <td align='right' class="tbcphp">Not yet</td></tr>
<tr><td class="tbcphp">Illidan</td> <td align='right' class="tbcphp">Not yet</td></tr>
</table>
</div>

<script type='text/javascript'>;
var collapse1=new animatedcollapse('karazhan', 440, false);
var collapse2=new animatedcollapse('gruul', 80, false);
var collapse3=new animatedcollapse('magtheridon', 40, false);
var collapse4=new animatedcollapse('zulaman', 200, false);
var collapse5=new animatedcollapse('coilfang', 240, false);
var collapse6=new animatedcollapse('tempest', 160, false);
var collapse7=new animatedcollapse('cot', 200, false);
var collapse8=new animatedcollapse('bt', 400, false);
</script>