Lessons:19Length:2.9 hours
7.2 Building a Better Accordion
Our first accordion script worked, but it relied upon jQuery's JavaScript-based animation capabilities to animate the elements. In this lesson, we'll combine just about everything we've talked about in the last few lessons—selecting elements, Ajax, and CSS transitions—to build a better accordion script.
1.Introduction
1.1Introduction01:47
1.1
Introduction
01:47
2.JavaScript Basics
2.1Variables and Functions08:37
2.1
Variables and Functions
08:37
2.2Objects10:10
2.2
Objects
10:10
2.3DOM Basics12:53
2.3
DOM Basics
12:53
3.jQuery
3.1Bower11:45
3.1
Bower
11:45
3.2Revisiting the DOM09:46
3.2
Revisiting the DOM
09:46
3.3Create an Accordion Control15:11
3.3
Create an Accordion Control
15:11
4.Bootstrap
4.1Grid Basics11:26
4.1
Grid Basics
11:26
4.2Adjusting for Multiple Screens06:44
4.2
Adjusting for Multiple Screens
06:44
5.Working with the DOM
5.1Selecting Elements With the DOM API09:44
5.1
Selecting Elements With the DOM API
09:44
5.2Manipulating CSS Classes With jQuery08:20
5.2
Manipulating CSS Classes With jQuery
08:20
5.3Manipulating CSS Classes With the DOM API09:00
5.3
Manipulating CSS Classes With the DOM API
09:00
5.4Handling Events With jQuery09:19
5.4
Handling Events With jQuery
09:19
5.5Listening for Events With the DOM API07:24
5.5
Listening for Events With the DOM API
07:24
6.HTTP Requests with JavaScript
6.1JSON and jQuery's Ajax API12:40
6.1
JSON and jQuery's Ajax API
12:40
6.2Using `fetch()` to Make Requests08:38
6.2
Using `fetch()` to Make Requests
08:38
7.CSS Transitions
7.1Animating Elements With Transitions06:51
7.1
Animating Elements With Transitions
06:51
7.2Building a Better Accordion15:06
7.2
Building a Better Accordion
15:06
8.Conclusion
8.1Conclusion01:19
8.1
Conclusion
01:19
