Solved

Collapse & expand PHP query menu

Posted on 2011-09-13
5
312 Views
Last Modified: 2012-05-12
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 '&nbsp;&nbsp;', $row->eventdate, '&nbsp;', $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?
0
Comment
Question by:BrighteyesDesign
  • 3
5 Comments
 
LVL 8

Expert Comment

by:PranjalShah
ID: 36531154
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/ 
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36531329
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

0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 36531358
something like this php code will produce above result (hopefully):
<?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 )
      {
            if ($curyear != null) echo '</div>';
            $curyear=$row->y;
            echo '<div class=header id=divHeader', $curyear, '>', $curyear, '</div>';
            echo '<div class=content id=divContent', $curyear, '>'
      }
        echo '&nbsp;&nbsp;', $row->eventdate, '&nbsp;', $row->title, '<br />';
}
echo '</div>';
$dbhandle->close();
?>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36531365
above php code + first 16 lines from my post (36531329) will do what you want...
0
 

Author Closing Comment

by:BrighteyesDesign
ID: 36531415
Perfect! thanks
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
This article discusses four methods for overlaying images in a container on a web page
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question