jQuery UI: Accordion and Tabs

ACCORDION and TABS

The steps you need to do to implement the basic jQuery UI:

Put the jQuery library, jQuery UI library and the UI's CSS in the <head> section of your site. Or, to be simple, just stack them like this:
- jQuery ► jQuery UI CSS ► jQuery UI library ► script ► HTML elements
- jQuery ► jQuery UI CSS ► jQuery UI library ► HTML elements ► script
You need to make sure the jQuery library is on top of everything.
The script loader:

For Accordion UI, put this line anywhere after the library
<script>
$(function() {$( "#accordion" ).accordion();});
</script>
For Tabs UI, put this line anywhere after the library
<script>
$(function() {$( "#tabs" ).tabs();});
</script>

Put the HTML section in the <body> of your site.

So then, the stacking will look something like this:

<head>
  <!--your own head content-->
  <!--jQuery UI CSS-->
  <link rel="stylesheet" href="host-url/jquery-ui.css" />
  <!--jQuery library-->
  <script src="host-url/jquery.min.js"></script>
  <!--jQuery UI library-->
  <script src="host-url/jquery-ui.js"></script>
  <!--script trigger (can be placed below the HTML elements)-->
  <script>
    <!--Either it's Accordion or Tabs, or both-->
  </script>
</head>

<body>
  <!--The HTML section of the UI - will be explained below-->

Anyway, you can also put the trigger script below the HTML elements.

DEMO: JQUERY UI - ACCORDION

Section 1

CONTENT 1. This is the first content thingy. NEAT isn't it?

Section 2

Section 3

CONTENT 3. This is the third content. Wait, what?

Section 4

The HTML of that:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>CONTENT 1. This is the first content thingy. NEAT isn't it?</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <div style="text-align:center">
      <img src="URL-of-image" />
    </div>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>CONTENT 3. This is the third content. Wait, what?</p>
  </div>
  <h3>Section 4</h3>
  <div>
    <div style="text-align:center">
      <img src="URL-of-image" />
    </div>
  </div>
</div>

DEMO: JQUERY UI - TABS

Content 1
Content 2
Content 3

Ah, this is the first content.

Well, hello there!

The HTML of that:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Content 1</a>
    </li>
    <li><a href="#tabs-2">Content 2</a>
    </li>
    <li><a href="#tabs-3">Content 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Ah, this is the first content.</p>
  </div>
  <div id="tabs-2">
    <p>Well, hello there!</p>
  </div>
  <div id="tabs-3">
    <div style="text-align:center">
      <img src="URL-of-image" />
    </div>
  </div>
</div>

Monkey Raptor

Monkey Raptor

Thursday, June 6, 2013

jQuery UI: Accordion and Tabs

Section 1

Section 2

Section 3

Section 4

No comments

Post a Comment