Accordion and Tab controls using jQuery - Part 1

Written By: Ved Mishra -- 9/13/2011 -- join -- contribute -- (19) comments -- printer friendly version

Rating: Rate --

Categories: Design, Navigation, Programming and Customizations, SharePoint 2010, SharePoint Foundation 2010

< Prev - 1 | 2 | - Next > | Become a paid author


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. There are two very important gadgets worth mentioning: Accordion and Tabs.


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. The following is an example of real implementation of a 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 bars can be a good example. An Accordion Panel can contain substantial data of multiple categories shown together at one time.

< Prev - 1 | 2 | - Next >

Learn more about SharePoint

Sponsor Information

Copyright (c) 2010-2017 Edgewood Solutions, LLC All rights reserved
privacy | disclaimer | copyright | advertise | contribute | feedback | about
Some names and products listed are the registered trademarks of their respective owners. |