Plugin help or javascript help

Hi guys

I am trying to collapse a menu similiar to this site:

http://pulse.centrelink.gov.au/archive/

So all the months under articles by date collapse (the months currently expand, but I want the months to collapse too).

I think this site uses the following plugin

“Clean archives Reloaded”

I am no javascript guru, but can this be done with some javascript on the page? Can I edit the plugin or should I make it link to another page?

Thanks for any advice.

If it can be done with jquery or a javascript plug-in then it can certainly be done with “vanilla” because both are simply just javascript prewritten by someone else.

It’s your call, but unless you know what you are doing or have access to someone who does, I wouldn’t go messing with the jquery or plug-in code. Fwiw, it’s reasonably straight forward to expand/hide elements using vanilla javascript. You don’t actually need jquery or any plug-in.

It appears they are using the jQuery library, along with this bit of extra script in the head:


jQuery(document).ready(function() {
jQuery('.car-collapse').find('.car-monthlisting').hide();
jQuery('.car-collapse').find('.car-monthlisting:first').show();
jQuery('.car-collapse').find('.car-yearmonth').click(function() {
jQuery(this).next('ul').slideToggle('fast');
});
jQuery('.car-collapse').find('.car-toggler').click(function() {
if ( 'Expand All' == jQuery(this).text() ) {
jQuery(this).parent('.car-container').find('.car-monthlisting').show();
jQuery(this).text('Collapse All');
}
else {
jQuery(this).parent('.car-container').find('.car-monthlisting').hide();
jQuery(this).text('Expand All');
}
return false;
});
}); 

To add jQuery to your page, you just create a <script> element linking to the jQuery library (i.e. just a page of code) and an extra <script> element with the code I posted above. Then make sure the page elements have the came classes as in the code above (or rename them in your HTML and in the script to suit).

Thanks mate

I don;t just want to replicate what the page is currently doing, but I want to be able to further collapse the page so the months are no longer displayed indvidually. Sorry If I was not clear about that.

This would mean the months Jan 2012 to may 2010 can collapse also. And they can also exapand to show the days within the month.

I think I need to post this in the javascript forum

OK, thread moved. :slight_smile:

Hey raph, do you think you can take another look for me, the code you posted was helpful but not exactly what I was after. I want all of the months to collapse.

I am going to do some jquery tutorials for the next two hours.

Re-writing JS code isn’t my area, I’m afraid, so I’ll have to leave this to others. Also, I see you’ve started another thread on this question, so let’s keep the discussion in one place.