Contact Adam

[email protected]

Lectures & Projects

Web Coding Advanced Jquery and CSS Transitions

As a reminder, jQuery and Javascript are virtually the same thing. jQuery just allows you to interface with Javascript much more easily. So when I refer to jQuery, understand that plain old Javascript is also applicable, and I really mean either/or.

Some Background

This is a bit of a leap from our intro to jQuery, but still good stuff, so take your time with this. I am going to walk you through my own recipe for collapsable menus, sometimes called accordion menus. Some of you might know that you can do animations with jQuery, however, we are going to do our animations with CSS with jQuery acting like a director. CSS animations work a lot smoother than jQuery animations, so that is my recommendation.

With this assignment, we can practice and explore using CSS transitions (basic animations and visual effects) and writing your own custom jQuery. I’ll present this assignment as more of a concept so you can figure it out on your own. It will be challenging, so don’t get discouraged. We’ll see how the class does and solve the issues as they arise.

The Concept

HTML

This is the easy part. Just make a fake menu using an unordered list. You don’t need <a> tags right now, just a list with about 10 items. This list should have a class of “collapse.” Also, create something to click on like an HTML button which will trigger the animation and give it a class of .collapse-trigger. And don’t forget to load jQuery in the <head> section!

CSS

We’ll assume that your collapsable menu will be closed in it’s default state. The class of .collapse will need to have a height of zero so that it’s shut. But it also needs overflow: hidden so that way with a height of zero, you can’t see what’s inside of it. Finally, you need a transition, and you can start your research on that here. Basically, we just want to animate the height property.

jQuery

Here is where the fun begins, and by fun, I mean not-fun. So here we go:

Remember to put all Javascript inside <script> elements, and we start with:

$(document).ready(function() {
    //all of your code is executed here when the page loads
});

Then we are going to take your .collapse and store it as a variable so we can reuse it and reference it later. Remember, when you want jQuery to do something with your HTML, reference it just like you would with CSS ID’s and classes, and wrap it up exactly like this:

$('.your-elements-class-name'); /*OR*/ $('#your-elements-ID-name');

There are a bunch of ways for jQuery to reference an HTML element, but we’ll stick with ID and Class for now. So set up your code like this:

$(document).ready(function() {

    var collapse = $('.collapse');

});

Now an important note: to animate height with CSS, you need to know the destination height. So what is the height that your collapsable menu need to be? jQuery can figure this out for you and you’re better off doing that, but for now let’s use a hard-coded value to keep it simple. My suggestion: in your CSS, turn off height: 0 for a minute, then use the browser inspector to see the actual height of your .collapse element. Then store that value in a variable too. Just use numbers for now, jQuery will automatically turn it into pixels.

$(document).ready(function() {

    var collapse = $('.collapse');
    var height = 500;

});

With that out of the way, now we can think about this in a step-by-step fashion. So first step, is what happens when the user clicks the trigger button? A “click” is a valid browser event, and jQuery pretty much has a function for all browser events, you just need to pick the right one. Store your trigger button in a variable too.

$(document).ready(function() {

    var collapse = $('.collapse');
    var collapseTrigger = $('.collapse-trigger');
    var myHeight = 500;

    collapseTrigger.click(function() {
        //when the user clicks the collapseTrigger element,
        //whatever you want to happen goes here
    }); //close collapseTrigger.click

}); //close document.ready

So what do we want to happen the user clicks the trigger? We simply want to apply the new height to the .collapse element. If you set up your CSS transition correctly, everything should work fine. With CSS transitions (in this case), whenever the height changes, the animation will happen as long as the height is a number and NOT “auto.” .height() is a jQuery function that will set the height of a HTML element.

$(document).ready(function() {

    var collapse = $('.collapse');
    var collapseTrigger = $('.collapse-trigger');
    var myHeight = 500;

    collapseTrigger.click(function() {
        collapse.height(myHeight);
    }); //close collapseTrigger.click

}); //close document.ready

Conclusion

So from here, we’ll need to set up a way to close the menu, and like I mentioned, we need jQuery to figure out the height for us which is tricky. But let’s see how you do with this first, and we’ll go from there.