By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,558 Members | 1,373 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,558 IT Pros & Developers. It's quick & easy.

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

P: 22
I have Collapsible Panel and this is the header of it,
Expand|Select|Wrap|Line Numbers
  1. <div id="CollapsiblePanel1" class="CollapsiblePanel">
  2.      <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
  3.      <div class="CollapsiblePanelContent">
  4.        Content 
  5.      </div>
  6. <div>
  7.  
now I get the content from my DB and every time I get more content I go in new CollapsiblePanel all I need to know how to increases the id="CollapsiblePanel1" to be id="CollapsiblePanel2" and id="CollapsiblePanel3" and ect.

OK I have updated to all code of the page hope you get my point here
Expand|Select|Wrap|Line Numbers
  1. <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
  2. <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script type="text/javascript">
  5. var index = 1;  
  6. function update() {
  7.     document.getElementById('CollapsiblePanel'+index).id = 'CollapsiblePanel'+(index+1);
  8.     index++;
  9. }​
  10. </script>
  11.  
  12. <?php
  13.  
  14.     $getBlogers ="select * from blogs where active=1";
  15.     $result = $db -> query ($getBlogers) or die ($db->error);
  16.  
  17. ?>
  18. <style type="text/css">
  19. .UsersBlog #blogerComments tr .blogCommentsText {
  20.     border: 1px solid #CCC;
  21. }
  22. </style>
  23.  
  24.  
  25. <div id='contentBody_tutorials'>
  26. <table width="560" border="0">
  27.   <tr>
  28.     <td width="68"><img src="images/shareIcon.jpg" width="64" height="77" alt="share" /></td>
  29.     <td width="482" class="TextShareYourTutorials">Share your knowledge <span class="whatIsAllAbout">what is this about?</span></td>
  30.   </tr>
  31. </table>
  32. <p>&nbsp;</p>
  33. <div id="contentOnContentBody_blog">
  34.   <table id="blogerHeader" width="575" border="0" cellpadding="5">
  35.     <tr>
  36.       <td width="121" rowspan="4" align="center" valign="middle"><img src="images/userInvisible.jpg" width="80" height="80" /></td>
  37.       <td colspan="2">Welcome</td>
  38.     </tr>
  39.     <tr>
  40.       <td colspan="2">Your have 5   blogs</td>
  41.     </tr>
  42.     <tr>
  43.       <td colspan="2">Last blog date</td>
  44.     </tr>
  45.     <tr>
  46.       <td width="135"><a href="#">Add new blog</a></td>
  47.       <td width="198"><a href="#">View my blogs</a></td>
  48.     </tr>
  49.   </table>
  50.   <hr align="left" noshade="noshade" style="border:dotted 1px #b2b2b2;" />
  51. <?php
  52.     while ($blogsRow = $result -> fetch_object())
  53.     {
  54. ?>
  55. <div class="UsersBlog">
  56. <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>
  57.    <br />
  58.    <img style="margin:5px 0 5px 0;" src="images/roler_of_blogs.jpg" width="407" height="1" alt="ruler" />
  59.    <br />
  60.    <p><?php echo $blogsRow->Bdescription; ?></p>
  61.    <br />
  62.    <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>
  63.  
  64.    <div id="CollapsiblePanel" class="CollapsiblePanel">
  65.      <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
  66.      <div class="CollapsiblePanelContent">
  67.    <table width="400" border="0" cellpadding="5" cellspacing="0" id="blogerComments">
  68.    <?php
  69.    $getComments="select * from blogscomments where blogestID=$gotIT";
  70.    $getCommentsRuselts = $db -> query ($getComments) or die ($db->error);
  71.    while($rows = $getCommentsRuselts ->fetch_object()) {
  72. ?>
  73. <tr>
  74.      <td align="left" class="grayBoldText">by: </td>
  75.      <td align="left" class="normailDarkBlueText"><?php echo $rows->name; ?></td>
  76.      <td align="left" width="38" class="grayBoldText">Date: </td>
  77.      <td align="left" class="normailDarkBlueText"><?php echo $rows->dateCommented; ?></td>
  78.    </tr>
  79.  
  80.    <tr>
  81.    <td colspan="4" bgcolor="#F3F3F3" class="blogCommentsText"> <?php echo $rows->comments; }?></td>
  82.    </tr>
  83.    </table>
  84. </div></div></div>
  85. <?php
  86.     }
  87. ?>
  88.  
  89. </div>
  90.  
  91. <script type="text/javascript">
  92. var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
  93. </script>
  94.  
Mar 23 '12 #1

✓ answered by Marknut

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

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     $currentID = 0;
  3.     while ($blogsRow = $result -> fetch_object())
  4.     {
  5.         $currentID++;
  6. ?>
  7. [other code...]
  8.  
  9.    <div id="CollapsiblePanel<?php echo $currentID; ?>" class="CollapsiblePanel">

Share this Question
Share on Google+
2 Replies


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

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     $currentID = 0;
  3.     while ($blogsRow = $result -> fetch_object())
  4.     {
  5.         $currentID++;
  6. ?>
  7. [other code...]
  8.  
  9.    <div id="CollapsiblePanel<?php echo $currentID; ?>" class="CollapsiblePanel">
Mar 23 '12 #2

P: 22
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

Expand|Select|Wrap|Line Numbers
  1. <div id="<?php echo "CollapsiblePanel".$curentID; ?>" class="CollapsiblePanel">
  2.      <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
  3.      <div class="CollapsiblePanelContent">
  4.      <script type="text/javascript">
  5. var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("<?php echo "CollapsiblePanel".$curentID; ?>", {contentIsOpen:false});
  6. </script>
Many thanks Marknut for this great help really you made me happy

Regards

Yousef Altaf Wasti
Mar 24 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.