How to Create and Use an Accordion in JavaScript


show more Learn how to use a third-party JavaScript library, jQuery, to add a visual enhancement such as an accordion panel to a webpage. In this example, Simon Allardice shows how to combine what you've learned about JavaScript and jQuery to add behavior that makes your websites more compelling and usable. show less
please wait ...

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 A...

Example: Accordion
Video duration: 7m 20s 5h 31m Beginner

Viewers:

Learn how to use a third-party JavaScript library, jQuery, to add a visual enhancement such as an accordion panel to a webpage. In this example, Simon Allardice shows how to combine what you've learned about JavaScript and jQuery to add behavior that makes your websites more compelling and usable.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...