Hi Guys,

I have php mysql code which display data by date. if date is similar to the another it will display as one. When i implement an accordion it does not work. But if i will get the accordion it really works. And I am kinda stack of it.
Can anyone help me with this how to implement accordion?It seems i got a problem with implementing an accordion with this matter. Can anyone help me?

<?php
	
$result = mysql_query("SELECT distinct monthname(local_date) as month FROM tbl_localnews"); 
if(mysql_num_rows($result))
	{
while ($row = mysql_fetch_array($result)) 
{	
	print("<br><a href='news.php?month=".$row['month']."'>News for ".$row['month']."</a>");	
}
mysql_free_result($result);

}
?>

So what is the problem here? I assume that your code is trying to print out a list of links that link to each consecutive month in tbl_localnews.

Member Avatar for diafol

What accordion are you talking about? Accordions are usually js or ajax affairs. There are about a gazillion different flavours out there. All you've done is loop a bunch of links.

So what is the problem here? I assume that your code is trying to print out a list of links that link to each consecutive month in tbl_localnews.

I have a php mysql that it will display data by date. If the data similar it will diplay as one category. And it works. However when i put accordion it only flip in the top one.

Example :

November 25, 2010

Title 1
This is description 1.

Title 2
This is description 2.

Title 3
This is description 3.

November 24, 2010

Title 1
This is description 1.

Title 2
This is description 2.


November 23, 2010

Title 1
This is description 1.

Title 2
This is description 2.


Now, If you click November 24, 2010 all data in November 24, 2010 will only display :
Title 1
This is description 1.

It should be display all the data on that date.
Here is my codes :

$(function() {
		$("#accordion").accordion(
{
changestart: function(event, ui) {
       ui.newContent.css('overflow' , 'hidden');
   },
   change: function(event, ui) { 
     ui.newContent.css('overflow' , 'auto');
   }
});
	});
<div id="accordion">
<?php
 $last_date = "";
    $result = mysql_query("SELECT * FROM tbl_localnews ORDER BY local_date DESC");
    while ($row = mysql_fetch_array($result)) {
    if ($row['local_date'] != $last_date) {
    echo "<div class='update'><a href='#'>News for ".dateConvert($row['local_date'])." Updated ".hrsConvert($row['local_date'])."</a></div>";
        $last_date = $row['local_date'];
    }
	echo "<div class='mid_4_a_maincontent_newsarea'>";
    echo "<h2> $row[local_title]</h2>";
    echo "<p>$row[local_desc]</p>";
	echo "</div>";
 	}
mysql_free_result($result);
 ?>
</div>

Please click this link to see the result of this code.

And click this link to the result what i want to happen.

What accordion are you talking about? Accordions are usually js or ajax affairs. There are about a gazillion different flavours out there. All you've done is loop a bunch of links.

This is the accordion i use. And i also include the details in above the result of my code.

$(function() {
		$("#accordion").accordion(
{
changestart: function(event, ui) {
       ui.newContent.css('overflow' , 'hidden');
   },
   change: function(event, ui) { 
     ui.newContent.css('overflow' , 'auto');
   }
});
	});
Member Avatar for diafol

OK so you're using jqueryui. Could it be that the div is causing the problem, how about using h3 around the link? then place a div around the list of articles

Your code should spit out something like that below (from the jqueryui site):

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.