Code for spoilers

View previous topic View next topic Go down

Code for spoilers

Post by cclloyd9785 on Sat Jun 06, 2009 11:38 am

Here is the code for those who have lots of sigs or other stuff in their gallery. I am trying to rework the code so it doesnt have a black background. but until then here it is.

ADVNACED TABS
Code:
<table width="90%" cellspacing="1" cellpadding="0" border="0" align="left" onclick="if(this.getElementsByTagName('td')[1].style.display == 'none'){ this.getElementsByTagName('td')[1].style.display = '';this.getElementsByTagName('td')[2].style.display = 'none'; }else{ this.getElementsByTagName('td')[1].style.display = 'none';this.getElementsByTagName('td')[2].style.display = '';}" style="cursor: pointer;"><tr><td><span class="genmed">
HEADER
</td></tr><tr><td class="quote" style="display: '';"> </td><td class="quote" style="display: none;">
TEXT or HTML
</td></tr></table>


SIMPLE TABS
Code:
<dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><dt> Header or IMG header. </dt><dd><div style="display:none;"> TEXT (bbcode if wanted) or HTML </div></dd></dl>


<table width="750px" cellspacing="1" cellpadding="0" border="0" align="left" onclick="if(this.getElementsByTagName('td')[1].style.display == 'none'){ this.getElementsByTagName('td')[1].style.display = '';this.getElementsByTagName('td')[2].style.display = 'none'; }else{ this.getElementsByTagName('td')[1].style.display = 'none';this.getElementsByTagName('td')[2].style.display = '';}" style="cursor: pointer;"><tr><td><span class="genmed">
Advanced Tabs (no black background)
</td></tr><tr><td class="quote" style="display: '';"> </td><td class="quote" style="display: none;">
Ok that is the code for an advanced expandable/retractable tab. Now I will explain its mechanics and how to edit it.

Code:
 <table width="90%" cellspacing="1" cellpadding="0" border="0" align="center"

That is the code for the table demensions. Where it says 90%, you can replace that with a different %. It is based on the width of your forum. Or you can change it to ‘px’ for a direct number of pixels.

Border lets u add a border to it but it will be white. You can add ‘border color=”#000000”’changing the color code to change the color of it.

Where it says center is the alignment of the tab. Most people set it to left if there is going to be more than one tab.


Where it says HEADER is where the header of the tab goes. It can be bbcode there or just plain text. That is what will show up when it is collapsed. TEXT or HTML is where you put whatever you are going to make show up once clicked. You can use text with bbcode or HTML here. That is the explination of the advanced tabs and how it works.</td></tr></table> <br>


<table width="750px" cellspacing="1" cellpadding="0" border="0" align="left" onclick="if(this.getElementsByTagName('td')[1].style.display == 'none'){ this.getElementsByTagName('td')[1].style.display = '';this.getElementsByTagName('td')[2].style.display = 'none'; }else{ this.getElementsByTagName('td')[1].style.display = 'none';this.getElementsByTagName('td')[2].style.display = '';}" style="cursor: pointer;"><tr><td><span class="genmed">Simple Tabs (black background) </td></tr><tr><td class="quote" style="display: '';"> </td><td class="quote" style="display: none;">
Code:
<dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><dt> Header or IMG header. </dt><dd><div style="display:none;"> TEXT (bbcode if wanted) or HTML </div></dd></dl>

This one is a lot simpler.

All you have to know here is where it says Header or IMG header, is where you put your header either text with bbcode or an image.

And where it says Text or HTML is where you put what you want it to show when expanded. </td></tr></table>


Last edited by cclloyd9785 on Sat Jun 20, 2009 11:30 am; edited 1 time in total
avatar
cclloyd9785
Member
Member

Post Count : 3713
Joined : 2009-01-18


http://cclloyd9785.deviantart.com/

Back to top Go down

Re: Code for spoilers

Post by Shiki on Sun Jun 07, 2009 9:46 pm

aaaaah, shiki is too lazy to copy and paste
avatar
Shiki
Member
Member

Post Count : 2216
Joined : 2009-01-17


http://clementizzle.tumblr.com

Back to top Go down

Re: Code for spoilers

Post by darthjawafett on Sat Jun 20, 2009 8:04 am

It seems really complicated. Idk where you put the pictures
avatar
darthjawafett
Member
Member

Post Count : 2409
Joined : 2009-04-18


Back to top Go down

Re: Code for spoilers

Post by cclloyd9785 on Sat Jun 20, 2009 11:30 am

put it where it says TEXT OR HTML
avatar
cclloyd9785
Member
Member

Post Count : 3713
Joined : 2009-01-18


http://cclloyd9785.deviantart.com/

Back to top Go down

The author of this message was banned from the forum - See the message

Re: Code for spoilers

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum