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:
<script type="text/javascript">
$(document).ready(function () {
$('#expander').jqxExpander({ width: 250, height: 100 });
});
</script>
