show and hidden ocult <div>

[juliano.ma]

Hi friends,

I was looking one script for the Internet where I can show a <div> and occult this to use in my personal website of funny jokes.

I gentily ask your help to look the script below and to suggest the correction because the script below it’s not working.

look my code:

PHP Code:

<style type="text/css">
.cell2 {
    BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #c0c0c0 1px solid; FONT-FAMILY: Arial; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #e8ecef
}
.tRow {
    BORDER-RIGHT: #f48624 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #f48624 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #f48624 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #f48624 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffe1c8
}
TABLE.view {
    BORDER-RIGHT: #8fb3e4 1px solid; BORDER-TOP: #8fb3e4 1px solid; BORDER-LEFT: #8fb3e4 1px solid; WIDTH: 100%; BORDER-BOTTOM: #8fb3e4 1px solid
}
TABLE.view TD.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailedHidden {
    PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed {
    BACKGROUND: white; WIDTH: 100%
}
TABLE.view TR TD.detailed TABLE.detailed TD.left {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 120px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE.view TR TD.detailed TABLE.detailed TD.right {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.left {
    BORDER-RIGHT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.right {
    BORDER-LEFT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.desc {
    BORDER-TOP: #bbbbbb 1px solid; WIDTH: 100%; TEXT-ALIGN: left
}
</style>

<script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>

<p>

<?php
$conect = mysql_connect("localhost","user","pass");
$db = mysql_select_db("jokes");
$sql = "SELECT * FROM funjok ORDER BY id ASC";
$result = mysql_query($sql)
or die ();
while ($linha=mysql_fetch_array($result)) {
$id = $line["id"];
$title = $line["title"];
$text = $line["text"];
?>

<div align="center">
<table align="center" class=view style="WIDTH: 580">
<tbody>
<tr class=cell2 onMouseOver="this.className='tRow'"
onMouseOut="this.className='cell2'">
<td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center">
<div align="left"> <? echo "$id"; ?> - <a href="java script:expand('id');"><? echo "$title"; ?></a></div></td>
<tr class=detailedHidden id=infoid>
<td colspan=11 class=detailed> <table class=detailed>
<tbody>
<tr>
<td><? echo "$text"; ?></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>

<?
}
?>

</div>
<div align="center">
</div>

A work sample can to see on this website:
http://www.ragnarokhq.com/?module=db&section=Items

I need get id, title and text from database, but my code is not working

Help me please!