Year Archive with Accordion

#1 / Nov 13, 2012 12:37pm
defreeze
37 posts
Hi Guys,
I would like to have a year archive set up in an accordion but am struggling to get the right mark up.
This is my basic mark up
```
<div id="accordion">
{exp:channel:entries channel="programme" orderby="date" sort="desc"}
{date_heading display="yearly"}
{entry_date format="%Y"}
{/date_heading}

<a href="http://{path=">{title}</a>
<span class="bullet">•</span>


{/exp:channel:entries}
</div>
```
I need to have “div” around all the entry titles of a given year to enable to control whether it is open or closed.

Can you advise how I should control this?
Thanks
Patricia
#2 / Nov 15, 2012 2:28pm

Shane Eckert
7174 posts

Hey there defreeze,

Thank you for posting your question.

I am not quite sure I understand what you are asking for.

Can you show me some code, that does not have to work of course, that demonstrates what you are after?

Thank you,

#3 / Nov 16, 2012 8:41am

defreeze

37 posts

Hi!
Sorry that wasn’t a huge amount of info - I was in a rush to get out the door….

I would like to set up an accordion like this:
http://www.marymarygallery.co.uk/dev2012/index.php/programme/archive-html

and need expression engine to spit out this style of code:

<div id="accordion">
<dl class="accordion" id="slider">
<dt class="yearunderline">2012</dt>
<dd>
<a href="http://link">Example Project Space</a>

<a href="http://link">Sara Barker at 45 Alexandra Park Street</a>

<a href="http://link">Alistair Frost</a>

<a href="http://link">Lotte Gertz - New Work</a>

<a href="http://link">Lorna Macintyre</a>

<a href="http://link">Marieta Chirulescu and David Korty</a>

<a href="http://link">Construct</a>

</dd>
<dt class="yearunderline">2011</dt>
<dd>
<a href="http://link">Lili Reynaud-Dewar - Some objects blackened and a body too</a>

<a href="http://link">Alan Reid</a>

<a href="http://link">Alistair Frost and Gerda Scheepers</a>

<a href="http://link">Aleana Egan - nature had an inside</a>

<a href="http://link">Maximilian Zentz Zlomovitz</a>

</dd>
</dl>
</div>

However this expression engine mark up:

<div id="accordion">
<dl class="accordion" id="slider">
{exp:channel:entries channel="programme" orderby="date" sort="desc"}
{date_heading display="yearly"}
<dt class="yearunderline">{entry_date format="%Y"}</dt>
{/date_heading}

<dd><a href="http://path">{title}</a>
</dd>

{/exp:channel:entries}
</div>

Produces:

<div id="accordion">
<dl class="accordion" id="slider">
<dt class="yearunderline">2012</dt>
<dd><a href="http://link">Example Project Space</a>
</dd>
<dd><a href="http://link">Sara Barker at 45 Alexandra Park Street</a>
</dd>
<dd><a href="http://link">Alistair Frost</a>
</dd>
<dd><a href="http://link">Lotte Gertz - New Work</a>
</dd>
<dd><a href="http://link">Lorna Macintyre</a>
</dd>
<dd><a href="http://link">Marieta Chirulescu and David Korty</a>
</dd>
<dd><a href="http://link">Construct</a>
</dd>

<dt class="yearunderline">2011</dt>
<dd><a href="http://link">Lili Reynaud-Dewar - Some objects blackened and a body too</a>
</dd>
<dd><a href="http://link">Alan Reid</a>
</dd>
<dd><a href="http://link">Alistair Frost and Gerda Scheepers</a>
</dd>
<dd><a href="http://link">Aleana Egan - nature had an inside</a>
</dd>
<dd><a href="http://link">Maximilian Zentz Zlomovitz</a>
</dd>
</dl>
</div>

It’s not wrapping <dd></dd> around ALL the entries of a given year, but EACH entry making it impossible to get the accordion functionality.

I can’t figure out how best to display an archive split by year.
Many Thanks
Patricia

#4 / Nov 19, 2012 9:40am

defreeze
37 posts

Hi Guys,
I think the date_heading display=“yearly” can’t be used for what I want.

I need the entries broken up by year. Any ideas of where I should be looking?

Thanks
Patricia

#5 / Nov 20, 2012 5:00pm

Shane Eckert

7174 posts

Hey there Patricia,

I got it now. Awesome.

So you want to break that loop up and have the tags at just the start and finish, not upon each loop through.

Try this.

<div id="accordion">
<dl class="accordion" id="slider">
{exp:channel:entries channel="programme" orderby="date" sort="desc"}
{date_heading display="yearly"}
<dt class="yearunderline">{entry_date format="%Y"}</dt>
{/date_heading}
{if count == 1}<dd>{/if}
<a href="http://path">{title}</a>

{if count == total_results}</dd>{/if}
{/exp:channel:entries}
</div>

Let me know if that is what you were looking for.

Thank you,

Thread

defreeze

Shane Eckert

defreeze

defreeze

Shane Eckert

Username

Password

Thread