I have a table that's generated by a normal PHP loop. What I want to do is create a form in the first column of each row that's hidden by default but appears when you click a toggle link in that row.
I can make a normal toggle-able div by creating a CSS id called hidden and setting display: none;
. Unfortunately I can't keep creating divs with id=hidden
that are automatically associated with the preceding link.
I am pretty inexperienced with both Javascript and CSS, so I've mostly tried to do this by patching together examples but I'm coming up empty. I've read in some places that you can't put divs inside of a table, so maybe I'm going about this all wrong.
Here's an example of what the code does and how I wish it worked, but of course it does not.
<script language="JavaScript" type="text/javascript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
<?php
while($array = mysql_fetch_array($sql))
{
?>
<tr>
<td>
<?php
echo $array['some_data'];
?>
<a href="#" onclick="toggle('hidden');">Toggle</a>
<div id="hidden"><?php echo $array['hidden_thing']; ?></div>
</td>
<td>
<?php echo $array['some_other_data']; ?>
</td>
</tr>
<?php
}
?>