Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stu Cowley
Stu Cowley
26,287 Points

Making my jQuery more Awesome!

Hey guys,

So I have developed myself a jQuery collapsing div and I want to add some additional functionality to the code but I am not 100% how I can do this one function I really want (still learning).

Basically I have a web site that I am developing for a sports association web site and I have utilise my code with the collapsing div for each round of competition on their fixture.

What I would really love is for a div to collapse depending on the date.

For example, it is June 28 2014. The association is about to start Round 15, I would love for my code to automatically collapse depending on the date, but as mentioned earlier I'm not 100% on how I would go about this, or even if it is possible within JavaScript/jQuery

Here is my latest version of the "round-picker" JavaScript code.

$(document).ready(function() {

    // ----- FIXTURE -----
    $('#hideDetailsRoundOneDivOne').hide();
    $('#hideDetailsRoundTwoDivOne').hide();
    $('#hideDetailsRoundThreeDivOne').hide();
    $('#hideDetailsRoundFourDivOne').hide();
    $('#hideDetailsRoundFiveDivOne').hide();
    $('#hideDetailsRoundSixDivOne').hide();
    $('#hideDetailsRoundSevenDivOne').hide();
    $('#hideDetailsRoundEightDivOne').hide();
    $('#hideDetailsRoundNineDivOne').hide();
    $('#hideDetailsRoundTenDivOne').hide();
    $('#hideDetailsRoundElevenDivOne').hide();
    $('#hideDetailsRoundTwelveDivOne').hide();
    $('#hideDetailsRoundThirteenDivOne').hide();
    $('#hideDetailsRoundFourteenDivOne').hide();
    $('#hideDetailsRoundFifteenDivOne').hide(); 
    $('#hideDetailsRoundSixteenDivOne').hide(); 
    $('#hideDetailsRoundSeventeenDivOne').hide();
    $('#hideDetailsRoundEighteenDivOne').hide();
    $('#hideDetailsRoundNineteenDivOne').hide();
    $('#hideDetailsRoundTwentyDivOne').hide();  
    $('#hideDetailsRoundTwentyOneDivOne').hide();

    $('#hideDetailsSemiFinalDivOne').hide();
    $('#hideDetailsPreliminaryFinalDivOne').hide();
    $('#hideDetailsGrandFinalDivOne').hide();


    $('a.hideDetailsButton').click(function() {
        if (!$(this).next('div.hideMe:first').is(':visible')) {
            $('.hideMe').hide(200);
        }
        $(this).nextAll('div.hideMe:first').toggle(300);
    });
});

I have an inkling that this may have to be done with PHP instead of JavaScript and would appreciate any advice.

Thanks in advance

Stu :)

3 Answers

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Well, you could do something like this: 

// define an object which uses div IDs as property names
// and set the dates you want to collapse the div on as values
var collapseChain = {
  one: new Date(2014, 5, 12), // remember months start at index 0, so Jan is 0 and Dec is 11
  two: new Date(2014, 5, 13),
  three: new Date(2014, 5, 14),
  four: new Date(2014, 6, 1),
  five: new Date(2014, 6, 2),
  six: new Date(2014, 7, 1)
}

var now = new Date(); // get the current date

for (id in collapseChain) { // iterate over the object properties
  if (collapseChain[id] < now) {
    $('#' + id).hide();} // hide the divs if the current date is after their `hide date`
}
Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey DIno,

So I would need to make:

one: new Date(2014, 5, 12),

and change it into

hideDetailsPreSeason: new Date(2014, 5, 12),

Sorry if this is a really dumb question but I'm not too confident on JavaScript at this stage.

Stu :)

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

If that's the ID of the div that you need hidden on some particular date, then yes.

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Dino,

Yep this script is great! I have one last eye-rolling question. I have two columns side-by-side with the Division 1 schedule and the collapsing divs, and then I have the Division 2 schedule next to the div 1 fixture. I have noticed that I can only have one round open at a time. How can I make it so I can open a round match-up in division one as well as opening a fixture in division two? In a nutshell how can I open two divs at a time. I hope that makes sense.

Stu :)