Thursday, June 6, 2013

jQuery UI: Accordion and Tabs

jQuery UI logo 
ACCORDION and TABS

The steps you need to do to implement the basic jQuery UI:
  1. 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
    • Or
    • jQuery ► jQuery UI CSS ► jQuery UI library ► HTML elements ► script
    You need to make sure the jQuery library is on top of everything.
  2. 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>
  3. Put the HTML section in the <body> of your site.
So then, the stacking will look something like this:
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:



DEMO: JQUERY UI - TABS

Ah, this is the first content.

Well, hello there!



The HTML of that:

No comments:

Post a Comment

Tell me what you think...