#jqxexpander

In this post we will show you how to add a jqxExpander to your web page.

1. Add the JavaScript files.

Create a “scripts” directory in the root directory of your webpage.

Copy the jqxexpander.js file into your scripts folder.

Copy the jqxcore.js file into your scripts folder.

Copy the jQuery.js file into your scripts folder.

Append the following code to the Head tag of your webpage:

<script src="./scripts/jquery.js" type="text/javascript"></script> <script src="./scripts/jqxcore.js" type="text/javascript"></script> <script src="./scripts/jqxexpander.js" type="text/javascript"></script>

2. Add the CSS stylesheet file(s).

Create “styles” directory in the root directory of your website.

Copy jqx.base.css in the styles folder.

Include the jqx.base.css in your web page’s Head tag.

<link rel="stylesheet" type="text/css" href="./styles/jqx.base.css" />

3. Add the HTML markup for jqxExpander.

Create a DIV element in the document’s body with id=”expander”. The DIV must have two inner DIV elements – one for the head section and one for the content section.

<div id="expander"> <div>Head</div> <div>Content</div> </div>

Add the jqxExpander Header content in the first DIV element. Add any content that you want to display in the second DIV element.

4. Initialize jqxExpander using the script below: