Submit your widget

very cool Accordion effect

Created 10 years ago   Views 17519   downloads 4762    Author bqworks
very cool Accordion effect
View DemoDownload
Share |

you're a beginner in JavaScript and CSS, it can be very helpful to study the included examples before you start implementing the Classic Accordion into your page. You can even use them as starting point for your implementation.


1. Include the CSS and JavaScript files in the page

After copying all the necessary files, I need to include them in the header of the HTML page.

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="css/classic-accordion.css" media="screen"/>

        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.classicAccordion.min.js"></script>

2. Create HTML markup

You can use both HTML or XML to specify the content of the accordion but in this article I will cover only HTML use.

As you can see in the code below, you need to create an unordered list (<ul> element). Each "<li>" element represents a panel and inside the "<li>" element you need to add an <img> element.

Read more:

Tag: accordion