Accordions
Mission
Our continuing mission is to provide the safest, most efficient aerospace system in the world.
Vision
We continue to improve the safety and efficiency of flight. We are responsive to our customers and are accountable to the taxpayer and the flying public.
Values
- Safety is our passion. We are the world leaders in aerospace safety.
- Quality is our trademark. We serve our country, our stakeholders, our customers, and each other.
- Integrity is our character. We do the right thing, even when no one is looking.
- People are our strength. We treat people as we want to be treated.
Accordions present related sets of information in a way that saves space by showing only one bit of information at a time. The user clicks a heading to open the accordion to display the bit of information related to that heading.
NOTE: jQuery and jQueryUI must be enabled (the default setting) to use the accordion feature.
Difficulty:
Browser Compatibility: Supported browsers are IE7, IE8, Firefox, Chrome, Safari, and Opera. This feature is not supported in Internet Explorer 6 or lower.
How to implement Accordions
- Split your content into multiple sections with
h3headers. In the example there are 3 such sections. - Use two
divto wrap around each block of content you wish to appear underneath the headers. - The first appearing content item should receive
class="join"to remove extra whitespace at the top. Supported content items arep,ol,ul, anddl. - Wrap all of the headers (including the content blocks) within another
div, and give thisdivan ID of your choosing. The example's ID is "mvv". - Beneath the footer in the souce code, find the USER JS block. Within the script tag there, add
$("#YourIdHere").accordion({ header: "h3" });- By default, the accordion will be the height to contain it's longest content block at all times to prevent resizing when selecting each header. To prevent this, instead use
$("#YourIdHere").accordion({ header: "h3", autoHeight: false });
- By default, the accordion will be the height to contain it's longest content block at all times to prevent resizing when selecting each header. To prevent this, instead use
Why use Accordions?
Keep in mind the following when considering whether or not to implement an accordion:
- They are a good way to present complex, related information while saving space.
- Including an accordion on a page is useful when you have two or more sets of supplemental content that are relevant to but different from the main content of the page.
- The colored headers draw attention to the content in an accordion, and users often enjoy having interactive elements on the page.
- Using accordions may mean you can avoid requiring readers to navigate away from the page to see related information.
- The content you plan to use within the parts of an accordion are unrelated, Boxed Content is a better option.
If you have 1 or more sets of unrelated supplemental content for a page, Boxed Content is a better option.
