PHP Listing Help.

[envious]

Hi, 

Just wondering if anyone could advise some help for a site im working on.

Basically this archive is obviously currently quite long: 

 

Im trying to cut it down so that all of the 2011 months are under one tab for example "2011" -once you click then the months show, same with 2012, and 2013 etc.

 

Here is the current code, im using for the archive.

 

T<div class="content archive">
	<h3><?php echo _("Archive"); ?></h3>
  <ul>
<?php
  $start = $month = strtotime('2011-10-01');
  $end = strtotime(date('Y-m-d'));
  while($month < $end){
?>

    <li class="archiveLink">
      <p><a href="<?php echo URL ;?>blog/archive/love/<?php echo date('Y', $month); ?>/<?php echo date('m', $month); ?>"><?php echo _(date('F Y', $month)); ?><span>»</span></a></p>
    </li>

<?php
  $month = strtotime("+1 month", $month); }
?>

  </ul>
</div>

[Ch0cu3r]

You'll need to do a loop within a loop and have a nested list. Example code

<div class="content archive">
  <h3><?php echo _("Archive"); ?></h3>
  <ul>
<?php
$startDate = strtotime('2011-10-01');
$endDate = strtotime(date('Y-m-d'));

$startYear = date('Y', $startDate);
$endYear = date('Y', $endDate);

// loop through years
for($year = $startYear; $year <= $endYear; $year++) {
        
        // calcuate start/end months
        $startMonth = ($year == $startYear) ? date('m', $startDate) : 1;
        $endMonth   = ($year == $endYear)   ? date('m', $endDate)   : 12;

        $class = "archive$year";
        $url = URL . "blog/archive/love/$year/";
        
        // make new list item for year, enclose new list for months in year
        echo "    <li>\n      <a href=\"$url\">$year</a>\n      <ul class=\"$class\">\n";

        // loop through months
        for($month = $startMonth; $month <= $endMonth; $month++)
        {
            $_month = date('F', mktime(0, 0, 0, $month, 1, 0));
?>
        <li class="archiveLink">
          <p><a href="<?php echo URL . "blog/archive/love/$year/$month" ?>"><?php echo _($_month); ?><span>»</span></a></p>
        </li>
<?php 
        }

        // end enclosed month list
        echo "      </ul>\n    </li>\n";
    }
?>
  </ul>
</div>

Edited September 26, 2013 by Ch0cu3r

[envious]

thanks for this. Now i'm just trying to figure how to hide the months and only show them when you click the year.

For example when you first visit the page the months are hidden, then when you click the year they drop down.

any ideas?

[Ch0cu3r]

You can add JQuery accordion effect with a few changes to my example code
 

<div class="content archive">
  <h3><?php echo _("Archive"); ?></h3>
  <ul id="archiveList"> <!-- Give parent ul id -->
<?php
$startDate = strtotime('2011-10-01');
$endDate = strtotime(date('Y-m-d'));

$startYear = date('Y', $startDate);
$endYear = date('Y', $endDate);

// loop through years
for($year = $startYear; $year <= $endYear; $year++) {
        
        // calcuate start/end months
        $startMonth = ($year == $startYear) ? date('m', $startDate) : 1;
        $endMonth   = ($year == $endYear)   ? date('m', $endDate)   : 12;

        $class = "archive$year";
        $url = URL . "blog/archive/love/$year/";
        
        // make new list item for year, enclose new list for months in year
        echo "    <li><div>$year</div>\n      <ul>\n"; // <-- wrap year with a div 

        // loop through months
        for($month = $startMonth; $month <= $endMonth; $month++)
        {
            $_month = date('F', mktime(0, 0, 0, $month, 1, 0));
?>
        <li class="archiveLink">
          <p><a href="<?php echo URL . "blog/archive/love/$year/$month" ?>"><?php echo _($_month); ?><span>»</span></a></p>
        </li>
<?php 
        }

        // end enclosed month list
        echo "      </ul>\n    </li>\n";
    }
?>
  </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// JQuery accordian
$('#archiveList ul').slideUp(300);              // on page load hide months (slides up)
$("#archiveList > li > div").click(function(){
    $(this).next().slideToggle(300);            //  clicking year slides months down
});
 
$('#archiveList ul:eq(0)').show();              // make sure years stays visible
</script>

Edited September 30, 2013 by Ch0cu3r