Expand / Collapse Profile Options

<script type="text/javascript">
var rowVisible = true;
function toggleDisplay(tbl) {
var tblRows = tbl.rows;
for (i = 0; i < tblRows.length; i++) {
if (tblRows[i].className != "headerRow") {
tblRows[i].style.display = (rowVisible) ? "none" : "";
}
}
rowVisible = !rowVisible;
}
</script>
<table id="theTable" align="center">
<tr class="headerRow">
<th class="title1" width=700></th>
<tr>
<td class=window2>
-----CONTENT HERE-------
</td>
</tr>
</table>
<input type="button" value="Open/Close" onclick="toggleDisplay(document.getElementById('theTable'))" />
</center>

<center>
<script type="text/javascript">
var rowVisible = false;
function toggleDisplay(tbl) {
var tblRows = tbl.rows;
for (i = 0; i < tblRows.length; i++) {
if (tblRows.className != "headerRow") {
tblRows.style.display = (rowVisible) ? "none" : "table-row";
}
}
alert(tblRows.length);
rowVisible = !rowVisible;
}
</script>
<style type="text/css">
table#theTable tr {
display:none;
}
table#theTable tr.headerRow {
display:table-row;
}
</style>
<table id="theTable" border=1>
<tr class="headerRow">
<tr>
<td>----CONTENT HERE----</td>
</tr>
</table>
<input type="button" value="Open/Close" onclick="toggleDisplay(document.getElementById('theTable'))" />
</center>

<table width=130 id="border" class="border" cellpadding="1" cellspacing="1" border=0>
<tbody>
<tr>
<th onclick="moo(this);" align="center" class="title1">*DATE AREA'S NAME HERE*</th>
</tr>
<tr class='mp_hide'>
<td class="window1">
{additional_info}
</td>
</tr>
</tbody>
</table>

<style>
.mp_hide {
display:none;
}
</style>
<script>
function moo(s){
if(s.parentNode.nextSibling.className == 'mp_show'){
s.parentNode.nextSibling.className = 'mp_hide' } else { s.parentNode.nextSibling.className = 'mp_show';
}
}
</script>

Code:

<font size="2"> 
<center> 
{display_name} 
<br /> 
{rank} 
{if:warning}<br />{warning}{/if:warning} 
{if:custom_title}<br />{custom_title}<br />{/if:custom_title} 
</center> 
{if:avatar}<center><br />{avatar}</center>{/if:avatar} 
{if:personal_text}<center><br />{personal_text}</center>{/if:personal_text} 
<br /> 
Posts: {posts} 
<br /> 
{if:online} 
Status: <b>Online</b> 
{/if:online} 
{ifnot:online} 
Status: Offline 
{/ifnot:online} 
{if:gender}<br />Gender: {gender}{/if:gender} 
{if:location}<br />Location: {location}{/if:location} 
<br /> 
Joined: {joined} 
<br /> 
{if:contact} 
<br /><center>{contact}</center> 
{/if:contact} 
<table width=130  id="border" class="border" cellpadding="1" cellspacing="1" border=0>  
<tbody>  
<tr>  
<th onclick="moo(this);" align="center" class="title1">My Character Stats</th>  
</tr>  
<tr class='mp_hide'>  
<td class="window1">  
{additional_info}    
</td>  
</tr>  
</tbody>  
</table>  
<br /> 
<table cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="2"><font size="2">Reputation: {reputation}  </font></td> 
</tr> 
<tr> 
<td rowspan="2"> 
<div style="clear: both;"> 
{foreach:reputation} 
<div style="height: 8px; width: 8px; background-color: #009900; float: left; margin: 3px;"></div> 
{/foreach:reputation} 
{foreach:negative_reputation} 
<div style="height: 8px; width: 8px; background-color: #CC0000; float: left; margin: 3px;"></div> 
{/foreach:negative_reputation} 
<br style="clear: both;"> 
</div> 
</td> 
<td align="center"><font size="1">{reputation_give}</font></td> 
</tr> 
<tr> 
<td align="center"><font size="1">{reputation_take}</font></td> 
</tr> 
</table> 
</font>

<font size="2"> 
{BR}<center> 
{BR}{display_name} 
{BR}<br /> 
{BR}{rank} 
{BR}{if:warning}<br />{warning}{/if:warning} 
{BR}{if:custom_title}<br />{custom_title}<br />{/if:custom_title} 
{BR}</center> 
{BR}{if:avatar}<center><br />{avatar}</center>{/if:avatar} 
{BR}{if:personal_text}<center><br />{personal_text}</center>{/if:personal_text} 
{BR}<br /> 
{BR}Posts: {posts} 
{BR}<br /> 
{BR}{if:online} 
{BR}Status: <b>Online</b> 
{BR}{/if:online} 
{BR}{ifnot:online} 
{BR}Status: Offline 
{BR}{/ifnot:online} 
{BR}{if:gender}<br />Gender: {gender}{/if:gender} 
{BR}{if:location}<br />Location: {location}{/if:location} 
{BR}<br /> 
{BR}Joined: {joined} 
{BR}<br /> 
{BR}{if:contact} 
{BR}<br /><center>{contact}</center> 
{BR}{/if:contact} 
{BR}<table width=130  id="border" class="border" cellpadding="1" cellspacing="1" border=0>  
{BR}<tbody>  
{BR}<tr>  
{BR}<th onclick="moo(this);" align="center" class="title1">My Character Stats</th>  
{BR}</tr>  
{BR}<tr class='mp_hide'>  
{BR}<td class="window1">  
{BR}{additional_info}    
{BR}</td>  
{BR}</tr>  
{BR}</tbody>  
{BR}</table>  
{BR}<br /> 
{BR}<table cellpadding="0" cellspacing="0"> 
{BR}<tr> 
{BR}<td colspan="2"><font size="2">Reputation: {reputation}  </font></td> 
{BR}</tr> 
{BR}<tr> 
{BR}<td rowspan="2"> 
{BR}<div style="clear: both;"> 
{BR}{foreach:reputation} 
{BR}<div style="height: 8px; width: 8px; background-color: #009900; float: left; margin: 3px;"></div> 
{BR}{/foreach:reputation} 
{BR}{foreach:negative_reputation} 
{BR}<div style="height: 8px; width: 8px; background-color: #CC0000; float: left; margin: 3px;"></div> 
{BR}{/foreach:negative_reputation} 
{BR}<br style="clear: both;"> 
{BR}</div> 
{BR}</td> 
{BR}<td align="center"><font size="1">{reputation_give}</font></td> 
{BR}</tr> 
{BR}<tr> 
{BR}<td align="center"><font size="1">{reputation_take}</font></td> 
{BR}</tr> 
{BR}</table> 
{BR}</font> 
{BR}