Truncated Archive

dharris001 · 2008-11-27 00:20:26

I’m not sure if this can be done but here’s my vision:

I currently have an archive list using the following form on the right column of my page:

<!-- show the year -->
    <txp:if_different>
   <br><b><txp:posted format="%Y" /></b>  <img src="images/layout/arrow.gif" /><br />
    </txp:if_different>
    <!-- show the month -->
    <txp:if_different>
<txp:posted format="%B" /><br />
    </txp:if_different>
    <!-- article title and link -->
    <ul><li><txp:permlink><txp:title /></txp:permlink></li></ul>

And that will display ALL of my posts on the right column. I DO want all of my posts displayed on the right column, but I was wondering if there was a way to show and hide the post titles on click. Like when the page is first loaded, all of the article titles will be hidden and you can only see the Year and Month listed. Then, when you click the month, the posts from that month are displayed below it.

Is such a task possible?

Thank you for your time!!!

els · 2008-11-27 23:51:18

You can do that with javascript. I like this jQuery plugin, but if you google for javascript or jquery and collapse/expand you’ll find lots of other possibilities.

Gocom · 2008-11-28 00:25:03

Or you don’t even need any jQuery plugin – slide/expand/collapse/toggle are part of the core jQuery core.

In example if you have month inside h3 and title list below inside ul below it, you could use something like this (note: not tested, wrote on fly):

$('ul').hide();
$('h3').click(function () {
	$(this).next('ul').slideToggle('fast');
});

Last edited by Gocom (2008-11-28 00:27:55)

dharris001 · 2008-11-28 05:09:18

Well, I wasn’t really sure how to apply it, so I assumed it goes like this?

<script type="text/JavaScript">
$('ul').hide();
$('h3').click(function () {
	$(this).next('ul').slideToggle('fast');
});
</script>
<!-- show the year -->
    <txp:if_different>
   <br><b><txp:posted format="%Y" /></b>  <img src="images/layout/arrow.gif" /><br />
    </txp:if_different>
    <!-- show the month -->
    <txp:if_different>
<h3><txp:posted format="%B" /></h3><br />
    </txp:if_different>
    <!-- article title and link -->
    <ul><li><txp:permlink><txp:title /></txp:permlink></li></ul>

However it didn’t work.

MattD · 2008-11-28 06:55:47

make sure you’ve loaded jquery on the page.

dharris001 · 2008-11-28 17:15:09

Ok, I’ve downloaded and applied jquery, but where then do I put this segment?

$('ul').hide();
$('h3').click(function () {
	$(this).next('ul').slideToggle('fast');
});

els · 2008-11-28 17:34:49

jQuery is already part of the Textpattern install. So if you use it like this (in the head section of your page) it should work:

<script type="text/javascript" src="<txp:site_url />textpattern/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('ul').hide();
$('h3').click(function () {
	$(this).next('ul').slideToggle('fast');
});
});
</script>

dharris001 · 2008-11-28 17:46:29

Ok well now it looks like progress is being made. Now, all of the lists are hidden, and the H3s stay visible. But, when I click the H3s, nothing happens. Actually the H3s don’t look like links at all.

So right now I have Els suggestion in the head of the page and the archive form is the way it was when I first posted.

els · 2008-11-28 20:45:50

The problem may be in the last line of your article form:

<ul><li><txp:permlink><txp:title /></txp:permlink></li></ul>

It wil wrap the <ul><li> tags around every permlink, so you’ll probably have a bunch of uls instead of just one. Now if_different and list tags don’t play together very well, there is a workaround but it involves output of lots of empty ul tags. It’s valid html though, so if you don’t mind you can change your form to something like this:

<txp:if_first_article>
	<ul style="display: none;"><li></li>
</txp:if_first_article>
<txp:if_different>
	</ul>
<!-- show the year -->
	<h3><txp:posted format="%Y" /></h3>
        <ul style="display: none;"><li></li>
</txp:if_different>
<txp:if_different>
	</ul>
<!-- show the month -->
	<h4><txp:posted format="%B" /></h4>
	<ul>
</txp:if_different>
<!-- article title and link -->
	<li><txp:permlink><txp:title /></txp:permlink></li>
<txp:if_last_article>
	</ul>
</txp:if_last_article>

I changed the hn tags, so you would have to change the script as well:

<script type="text/javascript">
$(document).ready(function(){
$('ul').hide();
$('h4').click(function () {
	$(this).next('ul').slideToggle('fast');
});
});
</script>

You can make the h4 look like links by adding anchor tags:

<h4><a><txp:posted format="%B" /></a></h4>

and put this in your CSS:

h4 a:hover {cursor: pointer;}

dharris001 · 2008-11-28 23:50:00

Wow, you’re amazing, Els! Thanks so much for all your help! Works perfectly :D

Textpattern CMS

Textpattern CMS support forum

#1 2008-11-27 00:20:26

Truncated Archive

#2 2008-11-27 23:51:18

Re: Truncated Archive

#3 2008-11-28 00:25:03

Re: Truncated Archive

#4 2008-11-28 05:09:18

Re: Truncated Archive

#5 2008-11-28 06:55:47

Re: Truncated Archive

#6 2008-11-28 17:15:09

Re: Truncated Archive

#7 2008-11-28 17:34:49

Re: Truncated Archive

#8 2008-11-28 17:46:29

Re: Truncated Archive

#9 2008-11-28 20:45:50

Re: Truncated Archive

#10 2008-11-28 23:50:00

Re: Truncated Archive

Board footer