Divided Times due February 17, 2015

Assignment

• Build out the interactive functionality of The Divided Times project.

Details

Divided Times (download) (preview)

Download the starter files, which will include HTML and CSS to help get you started.

Getting Started

I recommend starting by first examining what is already there, and making sure you understand how the HTML and CSS for the page are working. Investigate the DOM in the Inspector. It may be helpful to diagram out the tree structure for the navigation.

Take everything one step at a time. Get something small working before moving on to the next thing.

Hints

• Take everything one step at a time. Get something small working before moving on to the next thing.
• When in doubt about what’s going on, try console.log().
• If you get stuck on something for too long, take a break and come back to it.
• Don’t forget that you’ll probably want to use $(this) to make your life easier.

Further Reading

Please take some time to continue looking through the jQuery documentation. Oscar Otero also has a really nice table of contents for the docs at his jQuery Cheatsheet.

As a starting point, I recommend looking into these:

• .toggleClass() – turn a given class off or on
• .hasClass() – check if the element has a given class
• .hide() – visually hide the element
• .show() – visually show the element
• .slideUp() – animate to hide the element
• .slideDown() – animate to show the element
• .siblings() – find the element’s siblings
• .removeClass() – remove a given class from the element
• .addClass() – add a given class to the element