very cool Accordion effect

Home Accordionvery cool Accordion effect

very cool Accordion effect

11 years ago Views

18101

4927

bqworks

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>
     
<html>
    <head>
        <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>
    </head>
	
    <body>
     
    </body>
</html>

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.

Tag: accordion