Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1007
  • Last Modified:

jquery accordion populate headings with records

hi all please can any one help.

i have this accordion jQuery


i am looking to try and populate the headings with a result from a php query.

the thing is i need to know how to automatically add new headings to the accordion if lots of results are  found by my php database query.

hope i have explained well. thx for any comments.  
  • 4
  • 2
1 Solution
Is the content of the accordion static (hard coded) or dynamic (an AJAX response per se)?
helpchrisplzAuthor Commented:
i have a online games league. am letting players create a war / appointment. and on each clan profile this accordion will show the date, name of clans as the heading in the accordion then if the user clicks the heading it will expand and show more information about the league match appointment.

need to add more headings to the accordion if there are loads of upcoming league wars / appointments booked in.
helpchrisplzAuthor Commented:
so depending on the amount of records produced by the while loop i need to count them and have that as the number of headings in the accordion and then populate each heading with each record
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Ok, i think i got the idea here...

This is based on the basic functionality demo
<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<title>jQuery UI Accordion - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.6.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>

	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	$(function() {
            $( "#accordion" ).accordion();

<div class="demo">

<div id="accordion">
        $query = "SELECT heading, content FROM table WHERE 1";
        $result = mysql_query($query);
        while($row = mysql_fetch_object($result)){
	<h3><a href="#"><?php echo $row->heading;?></a></h3>
		<?php echo $row->content; ?>
    <?php } ?>

</div><!-- End demo -->

Open in new window

helpchrisplzAuthor Commented:
ahh looks so simple i understand now. i will test tomorrow as its 3:37 AM here  
helpchrisplzAuthor Commented:

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now