Solved

Collapse & expand PHP query menu

Posted on 2011-09-13
5
339 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 55

Expert Comment

by:Huseyin KAHRAMAN
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 55

Accepted Solution

by:
Huseyin KAHRAMAN 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 55

Expert Comment

by:Huseyin KAHRAMAN
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 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