SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by unconformed View Post

    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?
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It appears they are using the jQuery library, along with this bit of extra script in the head:

    Code:
    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).

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I need to post this in the javascript forum
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by unconformed View Post
    I think I need to post this in the javascript forum
    OK, thread moved.

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by unconformed View Post
    I want all of the months to collapse.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •