Need help with collapsible table

[mediabob]

Hi, I am trying to build a page that has a table inside a collapsible div. The table is dynamic, in that it is populated from a MySQL database.

 

Now, the problem I have is that when I expand the table, I only get the very first row from the database.  I know that they all need a unique ID so I am using the record ID from the db to dynamically assign each row a unique number, but it still does not work, I just get the first row. (They are all pulled, the div just does not show them all. )

 

So I played around a bit and moved the code inside the repeat region for the table, this was halfway there, except now I get a "show" link for EVERY row of the table and I have to click each one individually to show it's corresponding data. So I am at a loss. I am trying to make it so clicking one link at the top reveals the entire table, but it's just not working, so any help would be greatly appreciated.

 

Here is what I am using so far...

 

Javascript that handles show/hide part

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = '';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

 

The link Im using to show/hide the table

<a href="javascript:;" onmousedown="toggleDiv('t<?php echo $row_info['memID'] ?>);">Show/Hide</a>

 

DIV

<div id="t<?php echo $row_info['memID'] ?>" style="display:none">
[table here]
</div>

 

Any help would be greatly appreciated... thanks in advance!

 

[Psycho]

From what you have showed, all of the content in the container div should display/hide when the toggleDiv() function is run. If that is not happening then there is likely some messed up HTML content inside the div that is causing the problem.

 

For these types of implementations I would write a flat HTML file with static content for a few records. Once I get it to work and am happy with the layout and functionality, I will THEN create the PHP code to dynamically get the output to match my template

[mediabob]

Hi, thank you for your quick response. You are correct the DIV does show and hide correctly. The problem lies within the dynamic table inside the DIV. When you "show" the DIV, the table might have 80 records, but you only get the first one. The table is created with a while loop, here is a trimmed down sample of it...

 

<table width="100%" border="1" cellpadding="2">
  <tr>
    <td>User Name</td>
    <td>Real Name</td>
    <td>Location</td>
    <td>Registered Date</td>
  </tr>
<?php 
do {
echo'
  		<tr>
    	<td>' .$row_info['uname']. '</td>
    	<td>' .$row_info['realname']. '</td>
    	<td>' .$row_info['memloc']. '</td>
    	<td>' .$row_info['regdate']. '</td>
  		</tr>';
  	} while ($row_info = mysql_fetch_assoc($info));
?>
</table>

[wildteen88]

the table might have 80 records, but you only get the first one.

If it is only showing one record then you need to check your query as well as the code that processes the query. However the snippet of code you posted should be displaying the results from your query fine. However there is no need for a do/while loop just a plain while loop will be fine.

  	while ($row_info = mysql_fetch_assoc($info))
  	{
echo'
  		<tr>
    	<td>' .$row_info['uname']. '</td>
    	<td>' .$row_info['realname']. '</td>
    	<td>' .$row_info['memloc']. '</td>
    	<td>' .$row_info['regdate']. '</td>
  		</tr>';
  	}

[mediabob]

The query is returning all 80 rows, if I remove the DIV and just display the table it shows up correctly. But with the DIV in place to hide it, once you show it you only get the first row of the table.

 

As I a said above, if I include the show/hide link IN the loop, then I will get 80 empty rows with the show/hide link 80 times, and I can click each individual link and get the correct row of information.

[Psycho]

OK, so you have confirmed that the entire table is getting output, but when using the JavaScript to show/hide the contents of the table you are only getting the first row. So, I think we have ruled out a PHP problem - at least with the logic to produce the output. But, I still think the problem is due to something in the output, such as a character (or characters) in the output content that is screwing up the DOM schema such that the JavaScript is not working correctly.

 

Can you save the rendered page as a flat HTML file and attach to the post?