Simple Accordion

[lifeisgood416]

I'm a noob at this obviously:


Is there away to repeat region but give the div id "test-header" and "test-content" a unique id each time it repeats, instead of it repeating the same. if there was a way to give an id
like <div id ="test1-header" etc... for the first article
then for the following article <div id="test2-header" <div id="test3-header", test4, etc....

my issue:

<div id="basic-accordian" >
  <!--Parent of the Accordion-->
  
  <div align="center"></div>
	<?php do { ?>
  <!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings header_highlight" ><?php echo $row_Recordset1['title']; ?></div>
  <!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test-content"><!--DIV which show/hide on click of header-->
    
    <!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
      <?php echo $row_Recordset1['body']; ?></div>
    </div>
  <!--End of each accordion item--> 
  
  
  
  
  
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?></html>
<?php
mysql_free_result($Recordset1);
?>

Since this is the original and has no repeat region / recordset the div id's are consecutive
and the javascript works.

<!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings header_highlight" >Home</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
    </div>

    
  </div>
<!--End of each accordion item--> 


<!--Start of each accordion item-->
  <div id="test1-header" class="accordion_headings" >About Us</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test1-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
    </div>

    
  </div>
<!--End of each accordion item--> 



<!--Start of each accordion item-->
  <div id="test2-header" class="accordion_headings" >Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test2-content"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />

    </div>
    
  </div>
<!--End of each accordion item-->

without this each new article will all have the same test-header, test-content and the javascript won't work because of the same names.

real demo: http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/

my issue:
http://www.theolifeteen.com/accordion.php

 

[tim_m]

first, shouldn't you be using a regular while loop, not a do-while? $row_Recordset1 won't be initialized for the first iteration of the loop, unless you do it in some other code.

anyway, since this is php after all, just use a counter variable.

so,

<?php
$i = 1; 
do { 
?>
...
 <div id="test<?php echo $i;?>-whatever">
...
<?php
    $i++;
} while (...);
?>