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.
Create recipe-8.html
, recipe-8.css
, and recipe-8.js
in the same directory as the jQuery library.
With your newly created files open, complete the following step-by-step instructions:
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> <script src="recipe-8.js"></script> </head> <body> <div class="container"> <div class="accordion"> <section> <a href...