asked on

Collapse & expand PHP query menu

I am displaying list of events using this query...

<?php

$dbhandle = new mysqli('localhost', 'localhost', 'UN', 'PW');
$result = $dbhandle->query("SELECT e.*, DATE_FORMAT(`eventdate`,'%Y') as y FROM `events` e WHERE (`title` IS NOT NULL) AND Trim(`title`)!='' ORDER BY `eventdate` DESC");

$curyear = null;
while ($row = $result->fetch_object())
{
      if( $curyear!=$row->y )
      {
            $curyear=$row->y;
            echo '<b>', $curyear, '</b><br />';
      }
echo '  ', $row->eventdate, ' ', $row->title, '<br />';
}
$dbhandle->close();
?>

You can see the results on this test page here...

http://www.anjoman.co.uk/previous-events-test2.php

What I want to do is just show the dates initially (collapsed) then, when you click a year the title's show beneath the selected year.

Is this possible to do?

PranjalShah

You will have to use some javascript for that...here is a good example

http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

HainKurt

create something like this

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>
div.header{font-weight:bold; border; cursor:pointer;}
div.content{margin:10px; display:none;}
</style>

<script>
$(document).ready(function() {
  $("div.header").click(function(){
    var divContentID = this.id.replace("Header","Content");
    var divContent = $("#" + this.id.replace("Header","Content"));
    divContent.toggle();
  });
});
</script>

<table width="100%" border="0" cellpadding="5" cellspacing="0" class="top15">
<tbody>
<tr>
	<td>
	<div class=header id=divHeader2010>2010</div>
	<div class=content id=divContent2010>
	2010-03-27&nbsp;Anjoman's Norouz Gala 1<br>
	2010-03-27&nbsp;Anjoman's Norouz Gala 2<br>
	2010-03-27&nbsp;Anjoman's Norouz Gala 3<br>
	</div>
	<div class=header id=divHeader2009>2009</div>
	<div class=content id=divContent2009>2009-12-05&nbsp;Anjoman 118  Shabeh Yalda Party!</div>
	<div class=header id=divHeader2005>2005</div>
	<div class=content id=divContent2005>2005-03-12&nbsp;Iranian New Year (1384) Party</div>
	<div class=header id=divHeader2004>2004</div>
	<div class=content id=divContent2004>2004-12-11&nbsp;SHABE YALDA 2005</div>
	</td>
</tr>
</tbody>
</table>

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

above php code + first 16 lines from my post (36531329) will do what you want...

BrighteyesDesign

ASKER

Perfect! thanks

Collapse &amp; expand PHP query menu

Collapse & expand PHP query menu