Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Example: Accordion

From: JavaScript Essential Training

Video: Example: Accordion

And let's do an example that uses third-party libraries to add some pure visual enhancements to a page. So I have got this resources page here, and it works fine, although this content here can get a little long, a little heavy. So what I'm going to do is use jQuery and its associated language jQuery UI, which you can get through this tab here, or just from jqueryui.com, to add some eye candy to this page. Now while jQuery has some basic visual effects, like fade in and fade out, jQuery UI ads on and takes this even further.

Example: Accordion

And let's do an example that uses third-party libraries to add some pure visual enhancements to a page. So I have got this resources page here, and it works fine, although this content here can get a little long, a little heavy. So what I'm going to do is use jQuery and its associated language jQuery UI, which you can get through this tab here, or just from jqueryui.com, to add some eye candy to this page. Now while jQuery has some basic visual effects, like fade in and fade out, jQuery UI ads on and takes this even further.

It's simply another library that uses jQuery to provide more user- interface-focused behavior. It has things like date pickers that we can use, and it has Autocomplete buttons that are really easy to start working with. And there is also a collection of effects. If you want to start animating certain behaviors on your page you can do things like pulsate certain divs or fade them or fold them or even explode them. What I'm going to do is use jQuery's Accordion, and this is very simple to use, the idea that we can have these collapsing and expanding sections of content where I click a header and get a certain section of content beneath it.

And I'll be able to make this happen with one statement of JavaScript. So, how do I do this? Well, into my HTML here, what I'm going to do is down towards, the bottom I do need to link to both jQuery and jQuery UI. Now just to let you know, we've talked about the idea of content distribution networks. Both of them are available from Google's CDN, so I could grab both the path to jQuery and the path to jQuery UI, or I could store them locally.

It doesn't really matter here. What I'm going to do is just put them in as script links here to the Google CDN address and following them, I'm just having a link to my own script file as well. Now before I start writing any script, of which I will need to do very little, what I do need to do is just add a few little markup pieces to my page. I need to tell the Accordion what areas it needs to control. So if I come up a little bit, what I have got here is this section. It actually has the h3 as headers and the content for the pieces that I'm interested in.

I have just split it out a little bit, so we can see really a bit better where it begins and where it ends. What I am going to do first is surround the entire section with a div. I am going to give that div an id of accordion. Now I don't have to here. Accordion is not the magical name, but it will make sense. I am just going to surround the whole thing with that, opening div and closing div tags. Now inside that I need to mark out the collapsing sections, and the pieces that actually collapse are the paragraphs, so I am just going to surround them all with their own sets of opening and closing divs.

I don't need to give them any ID; I just need to make sure that they have an opening and closing div around them. I'm just pasting in here when it's opening and removing the forward slash. So marking out each of those paragraphs, and finally, in my HTML the user needs to be able to click the headlines for each of those pieces. So what be accordion is going to expect is that we just mark them with a non-meaningful anchor tag, in this case a href=#.

And I'm just doing that inside the h3s here, and this is all the prep that I need to do on the page itself. Just really marking it out a little bit. Now I have no CSS for according, so this is not going to make any visual change to the page yet. In fact, just to prove that, I will switch over to the browser and refresh the page, and I can see the page appears exactly as it did before. I have just got a lot of paragraphs of content, Customer notifications in a big section, and Tour voucher in the big section, Trip planning in a big section.

So the final stage I have linked to the jQuery and jQuery UI, I've marked out the page here, and I need to do just one line of code. Now, in my script.js file I do have a wrapper here for window.onload, just so I didn't have to type it, and because I have jQuery, I don't need to use document.getElementById. I can just use the dollar sign. And what I am looking for is the div which I called accordion. Again, this can be any name but accordion makes a lot of sense, and in jQuery we use the pound or number or hash sign to say yes, this is ID. Accordion.

Well, then what? Well, by linking to jQuery UI, we will have an accordion method. We are telling it to go and accordion itself. Save that file, and what'll happen is this div look inside itself for its own gives internally and collapse those, all of them except the first one, and then automatically add the code to allow us to expand each of the section. So I hit Save, I jump back over to the browser, I reload this, and what I've got is the first part looks just fine, but I can see that the next section is already collapsed.

In fact, if I click on them, we get a little accordion eye candy. Now, the way accordions work, you only ever have one section open at a time, and it does that automatically, and it will collapse the others and take care of animating them. Now, I might add a little bit of styling to make it more obvious that these things can be clicked on, but it's working just fine. Very easy to add this with very little weight to the page. Now one of great things about jQuery UI is you don't have to load a copy of this that has everything.

If I go back to the homepage of jQuery UI, I can do what's called building a custom download by clicking this button, and then I can actually simply go through and tell it now I don't need the drag drop resize interactions. I don't need most of the widgets, but I do need Autocomplete. I don't need any of the effects, or perhaps I need Pulsate. And just by selecting these, we can then download our own little copy of it that's just a zipped file with the very little JavaScript that we need.

I don't need to do that right now because I just decided to link to the whole thing by using Google's CDN, but it's nice to know that it's available. And the great thing is because this behavior is all being added using JavaScript, there is no problem whatsoever if JavaScript is disabled. This page would just appear with all its parts expanded, the way it was originally designed. Now if, on the other hand, I'd written CSS to hide these sections and then only used JavaScript to open them up after the fact, we would actually have real problems if JavaScript was disabled. We would have non-readable content for people.

And this once again is the idea of progressive enhancement, adding behavior to make your pages more interesting, more compelling, while remaining completely usable without it.

Show transcript

This video is part of

Image for JavaScript Essential Training
JavaScript Essential Training

56 video lessons · 101326 viewers

Simon Allardice
Author

 
Expand all | Collapse all
  1. 3m 28s
    1. Welcome
      1m 1s
    2. What you should know
      1m 44s
    3. Using the exercise files
      43s
  2. 15m 41s
    1. Introduction to JavaScript
      8m 6s
    2. Creating your first JavaScript
      2m 13s
    3. Getting to know the tools and applications
      5m 22s
  3. 56m 8s
    1. Understanding the structure of JavaScript code
      7m 9s
    2. Where to write your JavaScript
      3m 56s
    3. Creating variables
      6m 21s
    4. Working with conditional code
      5m 44s
    5. Working with operators
      13m 28s
    6. Sending messages to the console
      2m 59s
    7. Working with loops
      8m 1s
    8. Creating functions
      8m 30s
  4. 36m 13s
    1. Working with arrays
      7m 57s
    2. Working with numbers
      6m 13s
    3. Working with strings
      8m 27s
    4. Working with dates
      5m 38s
    5. Working with objects
      7m 58s
  5. 9m 6s
    1. What is the DOM?
      5m 49s
    2. Working with nodes and elements
      3m 17s
  6. 25m 17s
    1. Accessing DOM elements
      11m 3s
    2. Changing DOM elements
      5m 42s
    3. Creating DOM elements
      8m 32s
  7. 24m 45s
    1. Introduction to JavaScript event handling
      8m 16s
    2. Working with onClick and onLoad events
      7m 36s
    3. Working with onBlur and onFocus events
      2m 36s
    4. Working with timers
      6m 17s
  8. 21m 41s
    1. Common JavaScript errors
      7m 14s
    2. Using Firebug
      4m 7s
    3. Going through a debugging session
      10m 20s
  9. 10m 13s
    1. Accessing form elements
      4m 20s
    2. Preventing a form from being submitted
      2m 36s
    3. Hiding and showing form sections
      3m 17s
  10. 9m 49s
    1. CSS and JavaScript
      3m 46s
    2. Removing and applying CSS classes
      2m 16s
    3. Changing inline styles
      3m 47s
  11. 19m 44s
    1. Understanding JavaScript style
      7m 39s
    2. Minifying your code
      4m 28s
    3. Using JavaScript code checkers
      7m 37s
  12. 22m 24s
    1. Introduction to JavaScript libraries
      3m 17s
    2. Linking to multiple JavaScript files
      2m 11s
    3. Introduction to jQuery
      12m 7s
    4. Using a content distribution network to deliver JavaScript files
      4m 49s
  13. 17m 35s
    1. JavaScript in HTML5
      9m 37s
    2. Using Modernizr
      3m 2s
    3. Using Strict Mode
      4m 56s
  14. 33m 3s
    1. Knowing the JavaScript to avoid
      6m 35s
    2. Introduction to regular expressions
      6m 56s
    3. Working with AJAX
      10m 44s
    4. Working with objects and prototypes
      8m 48s
  15. 21m 10s
    1. Example: Countdown
      8m 3s
    2. Example: Resize
      5m 47s
    3. Example: Accordion
      7m 20s
  16. 4m 58s
    1. Where to go from here
      4m 0s
    2. Goodbye
      58s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.