Show/Hide a box.

[mastercjb]

I cant for the life of me find out how to hide or show a box, like with a + or - button. Heres the script I'm working with. I need the top contentcontent box to hide. How would I do that?

 

<?
include 'header.php';?>



<table class="content">
<tr>
<td class="contenthead">Become A Respected Mobster</td>
</tr>
<tr>
<td class="contentcontent">
<table width='100%'>
<tr>


<td width='50%'><center>You're not a Respected Mobster yet! Why not?<br><br>

You're missing out!<br><br>

<a href="rmstore.php">Upgrade Now!<br>
Starting From $3.00!</a></td><br></center>
<td width='50%'>.: Bank Interest is DOUBLED!<br>
                        .: Respected MR Member Status!<br>         
                        .: Cash Bonus on Purchase!<br>
                        .: Points Bonus on Purchase<br>
                        .: Access to RM Only Features!</td>


</tr>


</table>
</td>
</tr>


<tr>
<td class="contenthead">General Information</td>
</tr>
<tr>
<td class="contentcontent">
<table width='100%'>
<tr>
<td width='15%'>Name:</td>
<td width='35%'><a href='profiles.php?id=<? echo $user_class->id; ?>'><? echo $user_class->formattedname; ?></a></td>
<td width='15%'>HP:</td>

<td width='35%'><?php echo $user_class->formattedhp; ?></td>
</tr>

<tr>
<td width='15%'>Level:</td>
<td width='35%'><? echo $user_class->level; ?></td>
<td width='15%'>Energy:</td>
<td width='35%'><?php echo $user_class->formattedenergy; ?></td>

</tr>

<tr>
<td width='15%'>Money:</td>
<td width='35%'>$<? echo $user_class->money; /*money_format('%(#10n', $user_class->money);*/ ?></td>
<td width='15%'>Awake:</td>
<td width='35%'><?php echo $user_class->formattedawake; ?></td>
</tr>

<tr>
<td width='15%'>Bank:</td>
<td width='35%'>$<? echo $user_class->bank; /*money_format('%(#10n', $user_class->bank);*/ ?></td>
<td width='15%'>Nerve:</td>
<td width='35%'><?php echo $user_class->formattednerve; ?></td>
</tr>

<tr>
<td width='15%'>EXP:</td>

<td width='35%'><?php echo $user_class->formattedexp; ?></td>
<td width='15%'>Work EXP:</td>
<td width='35%'><? echo $user_class->workexp; ?></td>
</tr>
<tr>
<td width='15%'>Prostitutes:</td>
<td width='35%'><?php echo $user_class->hookers; ?></td>
<td width='15%'>Marijuana:</td>
<td width='35%'><?php echo $user_class->marijuana; ?></td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="contenthead">Attributes</td>
</tr>
<tr>
<td class="contentcontent">
<table width='100%'>
<tr>
<td width='15%'>Strength:</td>
<td width='35%'><? echo $user_class->strength; ?></td>

<td width='15%'>Defense:</td>
<td width='35%'><? echo $user_class->defense; ?></td>
</tr>

<tr>
<td width='15%'>Speed:</td>
<td width='35%'><? echo $user_class->speed; ?></td>
<td width='15%'>Total:</td>

<td width='35%'><? echo $user_class->totalattrib; ?></td>
</tr>
</table>
</td>
</tr>

<tr><td class="contenthead">Battle Stats</td></tr>
<tr><td class="contentcontent">
<table width='100%'>
<tr>
<td width='15%'>Won:</td>
<td width='35%'><? echo $user_class->battlewon ?></td>
<td width='15%'>Lost:</td>
<td width='35%'><? echo $user_class->battlelost; ?></td>

</tr>

<tr>
<td width='15%'>Total:</td>
<td width='35%'><? echo $user_class->battletotal; ?></td>
<td width='15%'>Money Gain:</td>
<td width='35%'>$<? echo $user_class->battlemoney; ?></td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="contenthead">Crime Stats</td>
</tr>
<tr>
<td class="contentcontent">
<table width='100%'>

<tr>
<td width='15%'>Succeeded:</td>
<td width='35%'><? echo $user_class->crimesucceeded; ?></td>
<td width='15%'>Failed:</td>
<td width='35%'><? echo $user_class->crimefailed; ?></td>
</tr>

<tr>
<td width='15%'>Total:</td>

<td width='35%'><? echo $user_class->crimetotal; ?></td>
<td width='15%'>Money Gain:</td>
<td width='35%'>$<? echo $user_class->crimemoney; ?></td>
</tr>
</table></td>
</tr>
<?
include 'footer.php';
?>

[joel24]

get jquery.

www.jquery.com

uses javascript n ajax in a nice simplified form

 

put this in your head tag...? and get the jquery library from the jquery site... u can change fadeIn / fadeOut to toggleslide or slideUp / SlideDown etc etc.. look on the jquery site its mad

 

and the $('.contentcontent') refer to classes. you could change it to $('#contentcontent') and change hte table cell to id="contentcontent" and it would do the same.

the .showcontent button must have class .showcontent, or you can do the same as above for that... n same goes for the close button.

	
<script type="text/javascript">
jQuery(document).ready(function() {
// hide content on load... remove this line if you want it default shown.
	$('.contentcontent').hide();	

		$('.showContent').click(function(event) {
				event.preventDefault();
				$('.contentcontent').fadeIn('normal');
		});


		//close button
		$('.close').click(function(event) {
			event.preventDefault();
			$('.contentcontent').fadeOut('normal');
	  	});
});
</script>