Jquery UI Guide

The page below includes basic documentation for implementing two Jquery UI widgets:

Adding jQuery-UI
Accordion Widget
Tabs Widget

Adding jQuery UI CSS & JS

For production systems, please use the minified versions:

These should be added to your page's header (<header>).

Using the Accordion Widget

Convert a pair of headers and content panels into an accordion. Please reference the Tutorials provided by the jQuery Foundation for more information. (API)

How To:

Add the jQuery UI references above to the page's header.

Add a <div> to your page and give it a unique ID.

Within your <div> tag, create a pattern of alternating header tags (ex. <h4>) and content tags (ex. <p>)

Add a script to the bottom of your page before closing body tag (</body>) to make an accordion from your <div>.

Code Examples:

DIV tag

<div id="faq">
<h4>This is example header #1</h4>
<p>The content here must fit into a single tag.</p>
<h4>This is example header #2</h4>
<div>
<p>If you need multiple paragraphs...</p>
<p>include all in a single <div> tag.</p>
</div>
<h4>This is example header #3</h4>
<div>
<p>Lists should also be in a <div> tag.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</div>

Bottom Script

$("#faq").accordion({ heightStyle: "content" },{ collapsible: true },{ animate: 600 },{ icons: { "header": "ui-icon-circle-plus", "activeHeader": "ui-icon-circle-minus" }});

Accordion Demonstration

This is example header #1

The content here must fit into a single tag.

This is example header #2

If you need multiple paragraphs...

include all in a single <div> tag.

This is example header #3

Lists should also be in a <div> tag.

item 1
item 2

Using the Tabs Widget

A single content area with multiple panels, each associated with a header in a list. Please reference the Tutorials provided by the jQuery Foundation for more information. (API)

How To:

Add the jQuery UI references above to the page's header.

Add a <div> to your page and give it a unique ID.

At the top of your <div> tag, create an <ul> with a <li> for each panel in your document.

Underneath the <ul>, create a <div> with a unique id for each of your content panels

Add <a> tags with an href to each of your panel id's (ex. href="#panel-1")

Add a script to the bottom of your page before closing body tag (</body>) to make tabs from your <div>.

Code Examples:

<div id="categories">
<ul>
<li><a href="#panel-1">Panel #1</a></li>
<li><a href="#panel-2">Panel #2</a></li>
</ul>
<div id="panel-1">
<h4>This is panel #1</h4>
</div>
<div id="panel-2">
<h4>This is panel #2</h4>
</div>
</div>

Bottom Script

$("#categories-horizontal").tabs({ heightStyle: "auto" });

This is panel #1

I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text... I have a lot of text...

This is panel #2

This is panel #3

This is panel #4

Bottom Script

$("#categories-vertical").tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );

Jquery UI Guide

Adding jQuery UI CSS & JS

Using the Accordion Widget

How To:

Code Examples:

Accordion Demonstration

This is example header #1

This is example header #2

This is example header #3

Using the Tabs Widget

How To:

Code Examples:

Horizontal Tab Demonstration

This is panel #1

This is panel #2

This is panel #3

This is panel #4

Vertical Tab Demonstration

This is panel #1

This is panel #2

This is panel #3

This is panel #4