Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

May 28, 2020, 09:46:44 PM

Login with username, password and session length
Members
Stats
  • Total Posts: 190002
  • Total Topics: 20832
  • Online Today: 128
  • Online Ever: 917
  • (January 21, 2020, 09:02:26 AM)
Users Online
Users: 0
Guests: 72
Total: 72

Author Topic: Add Expandable/Collapsible text in Blocks  (Read 4599 times)

0 Members and 1 Guest are viewing this topic.

OblivionMage

  • Guest
Add Expandable/Collapsible text in Blocks
« on: June 11, 2008, 02:50:45 PM »
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.

Offline IchBin™

  • Developer
  • *
  • Posts: 16228
    • My Website
Re: Add Expandable/Collapsible text in Blocks
« Reply #1 on: June 11, 2008, 03:27:04 PM »
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.

Offline Lesmond

  • Do what you have to!
  • Administrator
  • *
  • Posts: 3129
    • Tiny Pix... Free Image Hosting and Sharing.
Re: Add Expandable/Collapsible text in Blocks
« Reply #2 on: June 11, 2008, 03:52:24 PM »
found this  here, there are one or two there
Please don't PM me for support without an invitation.


laric

  • Guest
Re: Add Expandable/Collapsible text in Blocks
« Reply #3 on: August 29, 2008, 03:59:21 AM »
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]
<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&#039;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&#039;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&#039;zon</td><td align='right' class="tbcphp">2007-11-16</td></tr><tr>
<td class="tbcphp">Jan&#039;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&#039;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>