Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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`
}

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

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

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