Accordion and Tab Controls Implementation through HTML and jQuery

Accordion and Tab Controls Implementation through HTML and jQuery

Overview
In this information intensive world, it sometimes gets difficult for organizations to facilitate a web-site with the home page containing all important information.  If there is too much content on the page entered directly, it creates a vertical (or horizontal) scrollbar. Normal Users like to see the content right on the page or with very few obvious clicks. This generates the idea of creating widgets/controls which help content owners to deliver the content in more user-friendly way. I am going to explain two of the most important controls and how to create them without using any server side code. These are:
1.       Accordion Control
2.       Tabbed Control

1.      Accordion Control

Definition

Now let’s first understand what Accordion means literally. It means a box-shaped musical instrument of the bellows-driven free-reed aerophone family, sometimes referred to as a squeezebox.
In Web technologies, The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several collapsible panels where only one can be expanded at a time. Following is an example of real implementation of Accordion control.
Usage
In HTML, a form that contains shipping address, billing address, and credit card information is often implemented as three separate pages, which requires the user to submit each page to the server before moving on to the next. An Accordion container can organize the information on three child panels with a single Submit button. This architecture minimizes server traffic and lets the user maintain a better sense of progress and context.
A home page of a web site which has a lot of content but no space to place them without avoiding horizontal/vertical scroll bar can be a good example. Accordion Panel can contain substantive data of multiple categories and show once at a time.

Implementation

  
Accordion Panel can be implemented with the use of HTML, CSS and jQuery. To download sample package click here.
Images: It contains 2 images for closed and open buttons. Alternatively you can choose to use plus and minus sign images.
CSS: accordion.css contains few CSS class responsible for look and feel and dimension.
jQuery: It contains 2 jQuery file. jquery-1.4.3.min.js is the minified version of standard jQuery file. jQueryAccordian.js contains the accordion logic. Update this file to change the Closed and Open button image reference path.
HTML: Accordion.html contains the HTML code for Accordion. Copy and paste this to appropriate place in your web app code. Change the reference path to jQuery and CSS files.

2.      Tabbed Control

Definition

A Tabbed control is a control which has two sections:
Tabbed buttons: A series of tabs which has associated content in tabbed content area
       Tabbed content: It shows the content of the selected tab.

Usage

Tabbed widget boxes have become a popular way to display useful information while conserving valuable screen real estate.
A home page of a web site which has a lot of content but no space to place them without avoiding horizontal/vertical scroll bar can be a good example. Similar to Accordion Panel, a tabbed control can contain substantive data of multiple categories and show once at a time.

Implementation

  

Tabbed Widget control can be implemented with the use of HTML, CSS and jQuery. To download sample package click here.
CSS: accordion.css contains few CSS class responsible for look and feel and dimension.
jQuery: It contains 2 jQuery file. jquery-1.4.3.min.js is the minified version of standard jQuery file. tabbedwidget.js contains the tab logic.
HTML:  Tabbed.html contains the HTML code for Tabbed Widget. Copy and paste this to appropriate place in your web app code. Change the reference path to jQuery and CSS files.

                                                                              

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu