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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial