Collapsible Panel that increases it's id every time in my loop

[Yousef Altaf]

I have Collapsible Panel and this is the header of it,

<div id="CollapsiblePanel1" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
     <div class="CollapsiblePanelContent">
       Content 
     </div>
<div>

now I get the content from my DB and every time I get more content I go in new CollapsiblePane l all I need to know how to increases the id="Collapsible Panel1" to be id="Collapsible Panel2" and id="Collapsible Panel3" and ect.

OK I have updated to all code of the page hope you get my point here

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var index = 1;  
function update() {
    document.getElementById('CollapsiblePanel'+index).id = 'CollapsiblePanel'+(index+1);
    index++;
}​
</script>

<?php

    $getBlogers ="select * from blogs where active=1";
    $result = $db -> query ($getBlogers) or die ($db->error);

?>
<style type="text/css">
.UsersBlog #blogerComments tr .blogCommentsText {
    border: 1px solid #CCC;
}
</style>


<div id='contentBody_tutorials'>
<table width="560" border="0">
  <tr>
    <td width="68"><img src="images/shareIcon.jpg" width="64" height="77" alt="share" /></td>
    <td width="482" class="TextShareYourTutorials">Share your knowledge <span class="whatIsAllAbout">what is this about?</span></td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="contentOnContentBody_blog">
  <table id="blogerHeader" width="575" border="0" cellpadding="5">
    <tr>
      <td width="121" rowspan="4" align="center" valign="middle"><img src="images/userInvisible.jpg" width="80" height="80" /></td>
      <td colspan="2">Welcome</td>
    </tr>
    <tr>
      <td colspan="2">Your have 5   blogs</td>
    </tr>
    <tr>
      <td colspan="2">Last blog date</td>
    </tr>
    <tr>
      <td width="135"><a href="#">Add new blog</a></td>
      <td width="198"><a href="#">View my blogs</a></td>
    </tr>
  </table>
  <hr align="left" noshade="noshade" style="border:dotted 1px #b2b2b2;" />
<?php
    while ($blogsRow = $result -> fetch_object())
    {
?>
<div class="UsersBlog">
<img style="margin-right:5px;" src="images/userInvisible.jpg" width="49" height="49" align="left" /><span class="blogTitle"><?php echo $blogsRow->Btitle; ?></span><br /><span class="ByNameCommenter"><?php echo $blogsRow->ByName; ?><br /><?php echo $blogsRow->dateAdded ?></span>
   <br />
   <img style="margin:5px 0 5px 0;" src="images/roler_of_blogs.jpg" width="407" height="1" alt="ruler" />
   <br />
   <p><?php echo $blogsRow->Bdescription; ?></p>
   <br />
   <p><a href="includes/postComments.php?id=<?php $gotIT=$blogsRow->id; echo $gotIT; ?>"><span class="commentLink">Comment</span></a> - <span class="reportLink">Report</span></p>

   <div id="CollapsiblePanel" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
     <div class="CollapsiblePanelContent">
   <table width="400" border="0" cellpadding="5" cellspacing="0" id="blogerComments">
   <?php
   $getComments="select * from blogscomments where blogestID=$gotIT";
   $getCommentsRuselts = $db -> query ($getComments) or die ($db->error);
   while($rows = $getCommentsRuselts ->fetch_object()) {
?>
<tr>
     <td align="left" class="grayBoldText">by: </td>
     <td align="left" class="normailDarkBlueText"><?php echo $rows->name; ?></td>
     <td align="left" width="38" class="grayBoldText">Date: </td>
     <td align="left" class="normailDarkBlueText"><?php echo $rows->dateCommented; ?></td>
   </tr>

   <tr>
   <td colspan="4" bgcolor="#F3F3F3" class="blogCommentsText"> <?php echo $rows->comments; }?></td>
   </tr>
   </table>
</div></div></div>
<?php
    }
?>

</div>

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

[Marknut]

My apologies if I don't completely understand the need here, but I think you might want to add a variable:

<?php
    $currentID = 0;
    while ($blogsRow = $result -> fetch_object())
    {
        $currentID++;
?>
[other code...]
 
   <div id="CollapsiblePanel<?php echo $currentID; ?>" class="CollapsiblePanel">

[Yousef Altaf]

Yes this is right you got me, many thanks brother should say the last part of it that the Spry javascript that usually appears at the foot of the page will move it within the loop itself to be something like this

<div id="<?php echo "CollapsiblePanel".$curentID; ?>" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
     <div class="CollapsiblePanelContent">
     <script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("<?php echo "CollapsiblePanel".$curentID; ?>", {contentIsOpen:false});
</script>

Many thanks Marknut for this great help really you made me happy

Regards

Yousef Altaf Wasti