Creating an accordion content slider

An accordion allows the user to easily skip through content. There are many jQuery plugins that provide the accordion functionality. However, this recipe will show you how to create a simple and attractive jQuery accordion content slider from scratch.

Getting ready

Create recipe-8.html, recipe-8.css, and recipe-8.js in the same directory as the jQuery library.

How to do it…

With your newly created files open, complete the following step-by-step instructions:

  1. Add the following HTML code to recipe-8.html to create a basic web page with the accordion and content:
    <!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 8</title> <link href="recipe-8.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"script> ...

Get jQuery 2.0 Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.