accordion yearly menu

colak · Today 07:54:36

I’m trying to create an accordion yearly menu but I cannot think of an economical way of constructing it. At the moment I have the following which is really bad as it needs to go back to 2006. Can anyone recommend a more efficient/automated way of doing it?

<div class="accordion">
  <div class="accordion-item" id="year_2026">
    <a href="#year2026" class="accordion-header">2026</a>
    <div class="accordion-content">
      <txp:article_custom month="2026" limit="999" section="projects" break="li" wraptag="ul">
            <a href="<txp:permlink />" rel="bookmark"><txp:title /></a>
      </txp:article_custom>
    </div>
  </div>

  <div class="accordion-item" id="year_2025">
    <a href="#year2025" class="accordion-header">2025</a>
    <div class="accordion-content">
      <txp:article_custom month="2025" limit="999" section="projects" break="li" wraptag="ul">
            <a href="<txp:permlink />" rel="bookmark"><txp:title /></a>
      </txp:article_custom>
    </div>
  </div>

  <div class="accordion-item" id="year_2024">
    <a href="#year2024" class="accordion-header">2024</a>
    <div class="accordion-content">
      <txp:article_custom month="2024" limit="999" section="projects" break="li" wraptag="ul">
            <a href="<txp:permlink />" rel="bookmark"><txp:title /></a>
      </txp:article_custom>
    </div>
  </div>
</div>

abu · Today 09:03:31

I did something like this in my plugin abu_archtree, but it currently needs jQuery.

For a live demo, you might take a look at my site.

Last edited by abu (Today 09:31:48)

Bloke · Today 11:23:59

Can you use article_custom with limit="0" sort="Posted desc" to get everything in that section in date order, and then use breakform to split it?

Inside the form, it might be possible to use <txp:if_different><txp:posted format="%Y" /></txp:if_different> and <txp:if_different><txp:posted format="%m" /></txp:if_different> to spit out your/month wrapper tags and headings.

It might not be easy because you need to top and tail it with markup each time it changes, and I’ve had a devil of a time trying to do that in the past. But between the container, breakby, breakform and the spaceship <+> it might be possible to fashion some reusable ‘cards’ that you can build and inject where you need them in the list.

colak · Today 13:26:15

Thanks so much abu. I managed to get rid of jquery only a couple of months ago.

Stef.
Your recommendation gives me some ideas. I’ll report back with the progress.

abu · Today 13:37:57

colak wrote #343320:

I managed to get rid of jquery only a couple of months ago.

One of my next projects.

etc · Today 14:28:22

What if you create an accordion-item form

  <div class="accordion-item" id="year_<txp:yield item="breakby" />">
    <a href="#year<txp:yield item="breakby" />" class="accordion-header"><txp:yield item="breakby" /></a>
    <div class="accordion-content">
	    <ul><+></ul>
    </div>
  </div>

and then call

<txp:article_custom section="projects" limit="0" breakby="<txp:posted format='%Y' />" breakform="accordion-item" wraptag="div" class="accordion">
    <li><a href="<txp:permlink />" rel="bookmark"><txp:title /></a></li>
</txp:article_custom>

jakob · Today 15:34:58

abu wrote #343321:

One of my next projects.

You can do that by utilizing the built-in filter for txp:article:

<!-- year link -->
<txp:site_url />/index.php?s=<txp:section />&month=2025
<!-- month link -->
<txp:site_url />/index.php?s=<txp:section />&month=2025-01

A standard txp:article tag will filter the articles by the corresponding YYYY-MM combination.

abu · Today 17:12:45

jakob wrote #343323:

You can do that by utilizing the built-in filter for txp:article:

A standard txp:article tag will filter the articles by the corresponding YYYY-MM combination.

Interesting idea. I’ll take a look into it. Thanks.

Bloke · Today 17:31:08

etc wrote #343322:

What if you create an accordion-item form

Yes! That’s the sort of thing I meant. But that’s way more elegant and doesn’t even need <txp:if_different>. Awesome.

I need to bookmark this pattern or put it somewhere handy, because it’s something I do quite a lot and I always forget how. Thank you.

Textpattern CMS

Textpattern CMS support forum

#1 Today 07:54:36