Toggle Div in PHP

**LeaFromOZ** · 02-14-2009, 04:43 AM

Im sure i got this script from here, but i cant find the links, or page... so im not sure, and thats why ive posted here, and not in the dynamic drive section....
This is the code i have:

HTML Code:

<script language="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>

<a href="#" onclick="toggle('box')">show/hide</a>
<div id="box">hide/show content</div>

I am using it in a PHP/sql array, and so the divs needed to show/hide are generated from a database. But when i use this script, it works only for the first div in the array.... So(i think) i basically need to be able to generate a unique id for each div automatically, so it works something like:

PHP outputs 3 divs, and javascript generates unique id for each div.

HTML Code:

<a href="#" onclick="toggle('box')">show/hide</a>
<div id="box">hide/show content</div>

<a href="#" onclick="toggle('box1')">show/hide</a>
<div id="box1">hide/show content</div>

<a href="#" onclick="toggle('box2')">show/hide</a>
<div id="box2">hide/show content</div>

Can this be done? If so, how can i do this?

Thanks all!

**LeaFromOZ** · 02-14-2009, 03:16 PM

anyone? please?

**magicyte** · 02-14-2009, 03:25 PM

Could you please post your PHP code? After this is done, anyone and everyone will have a better chance of accomplishing your goal for you. Thanks.

Essentially, when your creating divs and putting information into them from a database, you can make a loop within there that will generate a unique id for the div and the link that you want to use to hide that specific div. Again, this is very hard to do unless you post the PHP code.

**LeaFromOZ** · 02-14-2009, 03:34 PM

Thanks for your reply. My PHP code is below.

PHP Code:


    <?php
    
    
    $lateststatusupdates = sql_query("SELECT tv_userstatus.id, tv_userstatus.status_username, tv_userstatus.profile_status, tv_userstatus.profile_status_time 
    FROM tv_userstatus, db_buddies 
    WHERE db_buddies.buddy_username = '".$_COOKIE['session_username']."' 
    AND db_buddies.buddy_buddy = tv_userstatus.status_username 
    AND tv_userstatus.profile_status != '' 
    ORDER BY  tv_userstatus.profile_status_time DESC LIMIT 6");


    if (mysql_num_rows($lateststatusupdates) == 0) {
    
    echo '<tr>
          <td>'.$lang['area_buddies_status_updates_none'].'</td>
        </tr>';
    
    } else {
    
    while ($statusupdates = mysql_fetch_array($lateststatusupdates)) {
$a = '1';
    echo '<tr>
      <td rowspan="0" width="30" valign="top"><img src="'.user_picture($statusupdates['status_username'], 'thumb').'" width="30" height="30" class="picture_border" /></td>
      <td valign="top"><a href="'.SITEPROFILEURL.$statusupdates['username'].'" class="text_9_css"><strong><u>'.$statusupdates['status_username'].'</u></strong></a> '.$statusupdates['profile_status'].' <div style="font-size:8pt; color: #707070;">'.return_date($statusupdates['profile_status_time'], 'profile').'</div>

<a href="#" onclick="toggle(\'diV\')">Show/hide</a>
<div id="diV">

<form action="area.php" method="post">
<input type="hidden" name="statusid" value="'.$statusupdates['id'].'" />
<input type="text" name="comment" style="width:180px; height:50px;" />
<input type="submit" value="comment" />
</form>
'; 
$commentlist = sql_query("SELECT * FROM tv_statuscomment WHERE status_id = '".$statusupdates[id]."' ORDER BY comment_time DESC") or die(mysql_error());
    while ($statuscomment = mysql_fetch_array($commentlist)) {
       echo '
<div style="padding:3px; margin-bottom:5px; background: #ffffe5; border: 1px solid #e0e0e0;"><table width="" border="0" cellpadding="0">
<tr><td valign="top">
<img src="'.user_picture($statuscomment['commenter'], 'thumb').'" width="30" height="30" class="picture_border" />
</td><td style="" valign="top">
<div style="font-size:8pt; color: #707070;">
<a href="'.SITEPROFILEURL.$statuscomment['commenter'].'" class="text_9_css">'.$statuscomment['commenter'].'</a> - '.return_date($statuscomment['comment_time'], 'date').'</div><div style="font-size:8pt; color: #707070;">
'.$statuscomment['comment'].'</div>
</td></tr></table></div></div>';
    }
}    
}
    
    ?>

**magicyte** · 02-14-2009, 03:47 PM

Easier done than said

:

Code:

<?php
    
    
    $lateststatusupdates = sql_query("SELECT tv_userstatus.id, tv_userstatus.status_username, tv_userstatus.profile_status, tv_userstatus.profile_status_time 
    FROM tv_userstatus, db_buddies 
    WHERE db_buddies.buddy_username = '".$_COOKIE['session_username']."' 
    AND db_buddies.buddy_buddy = tv_userstatus.status_username 
    AND tv_userstatus.profile_status != '' 
    ORDER BY  tv_userstatus.profile_status_time DESC LIMIT 6");


    if (mysql_num_rows($lateststatusupdates) == 0) {
    
    echo '<tr>
          <td>'.$lang['area_buddies_status_updates_none'].'</td>
        </tr>';
    
    } else {
    $uniqueId = 0;
    while ($statusupdates = mysql_fetch_array($lateststatusupdates)) {
$a = '1';
    echo '<tr>
      <td rowspan="0" width="30" valign="top"><img src="'.user_picture($statusupdates['status_username'], 'thumb').'" width="30" height="30" class="picture_border" /></td>
      <td valign="top"><a href="'.SITEPROFILEURL.$statusupdates['username'].'" class="text_9_css"><strong><u>'.$statusupdates['status_username'].'</u></strong></a> '.$statusupdates['profile_status'].' <div style="font-size:8pt; color: #707070;">'.return_date($statusupdates['profile_status_time'], 'profile').'</div>

<a href="#" onclick="toggle(\'divn' . $uniqueId . '\')">Show/hide</a>
<div id="divn' . $uniqueId . '">

<form action="area.php" method="post">
<input type="hidden" name="statusid" value="'.$statusupdates['id'].'" />
<input type="text" name="comment" style="width:180px; height:50px;" />
<input type="submit" value="comment" />
</form>
'; 
$commentlist = sql_query("SELECT * FROM tv_statuscomment WHERE status_id = '".$statusupdates[id]."' ORDER BY comment_time DESC") or die(mysql_error());
    while ($statuscomment = mysql_fetch_array($commentlist)) {
       echo '
<div style="padding:3px; margin-bottom:5px; background: #ffffe5; border: 1px solid #e0e0e0;"><table width="" border="0" cellpadding="0">
<tr><td valign="top">
<img src="'.user_picture($statuscomment['commenter'], 'thumb').'" width="30" height="30" class="picture_border" />
</td><td style="" valign="top">
<div style="font-size:8pt; color: #707070;">
<a href="'.SITEPROFILEURL.$statuscomment['commenter'].'" class="text_9_css">'.$statuscomment['commenter'].'</a> - '.return_date($statuscomment['comment_time'], 'date').'</div><div style="font-size:8pt; color: #707070;">
'.$statuscomment['comment'].'</div>
</td></tr></table></div></div>';
$uniqueId++;
  }
}    
}
    
?>

That may work. Happy coding!

**LeaFromOZ** · 02-14-2009, 04:15 PM

Awesome, thanks so much...so clever, i never thought of using PHP, i was so fixed on a javascript solution, but i understand how that works......OK, So i tried it but it is doing funny things....(which is more than what is was doing before..lol)

there are only four divs generated by the PHP, so the first, and second open/close perfectly, except upon clicking the link, the page scrolls up to the top, like it would if you clicked a link in a page with a <a href="#" ...></a>
also, upon clicking the fourth link, it opens up the third div....and sometimes they only work after clicking them twice... Ive used firebug to see for any errors, but i didnt get any.

Any suggestions? Thanks again, youre a lifesaver...lol

**magicyte** · 02-14-2009, 04:19 PM

Could you post a link to your website? This may help anyone here diagnose the problem. By the way, the code I posted SHOULD work...

Here's some new code so that the page doesn't scroll up:

Code:

<?php
    
    
    $lateststatusupdates = sql_query("SELECT tv_userstatus.id, tv_userstatus.status_username, tv_userstatus.profile_status, tv_userstatus.profile_status_time 
    FROM tv_userstatus, db_buddies 
    WHERE db_buddies.buddy_username = '".$_COOKIE['session_username']."' 
    AND db_buddies.buddy_buddy = tv_userstatus.status_username 
    AND tv_userstatus.profile_status != '' 
    ORDER BY  tv_userstatus.profile_status_time DESC LIMIT 6");


    if (mysql_num_rows($lateststatusupdates) == 0) {
    
    echo '<tr>
          <td>'.$lang['area_buddies_status_updates_none'].'</td>
        </tr>';
    
    } else {
    $uniqueId = 0;
    while ($statusupdates = mysql_fetch_array($lateststatusupdates)) {
$a = '1';
    echo '<tr>
      <td rowspan="0" width="30" valign="top"><img src="'.user_picture($statusupdates['status_username'], 'thumb').'" width="30" height="30" class="picture_border" /></td>
      <td valign="top"><a href="'.SITEPROFILEURL.$statusupdates['username'].'" class="text_9_css"><strong><u>'.$statusupdates['status_username'].'</u></strong></a> '.$statusupdates['profile_status'].' <div style="font-size:8pt; color: #707070;">'.return_date($statusupdates['profile_status_time'], 'profile').'</div>

<a href="javascript:toggle(\'divn' . $uniqueId . '\')">Show/hide</a>
<div id="divn' . $uniqueId . '">

<form action="area.php" method="post">
<input type="hidden" name="statusid" value="'.$statusupdates['id'].'" />
<input type="text" name="comment" style="width:180px; height:50px;" />
<input type="submit" value="comment" />
</form>
'; 
$commentlist = sql_query("SELECT * FROM tv_statuscomment WHERE status_id = '".$statusupdates[id]."' ORDER BY comment_time DESC") or die(mysql_error());
    while ($statuscomment = mysql_fetch_array($commentlist)) {
       echo '
<div style="padding:3px; margin-bottom:5px; background: #ffffe5; border: 1px solid #e0e0e0;"><table width="" border="0" cellpadding="0">
<tr><td valign="top">
<img src="'.user_picture($statuscomment['commenter'], 'thumb').'" width="30" height="30" class="picture_border" />
</td><td style="" valign="top">
<div style="font-size:8pt; color: #707070;">
<a href="'.SITEPROFILEURL.$statuscomment['commenter'].'" class="text_9_css">'.$statuscomment['commenter'].'</a> - '.return_date($statuscomment['comment_time'], 'date').'</div><div style="font-size:8pt; color: #707070;">
'.$statuscomment['comment'].'</div>
</td></tr></table></div></div>';
$uniqueId++;
  }
}    
}
    
?>

**LeaFromOZ** · 02-14-2009, 04:39 PM

OK, sorry, ive just gone over my code, just incase before i put you through more hassle, and i found an open div tag... closed it, and now the problem is no more....

Gee, how do i thank you more than clicking the button??LOLOL....

All of my gratitude, youve been sooo helpful... Have a wonderful day/night.... and thanks so much again....

Lea