Using accordions in Drupal

ACC’s Drupal installation allows the use of jQuery’s accordion functionality within the content area of pages. Accordions are useful when displaying content that cannot be divided into separate pages, or grouping content together in a scannable group.

Some examples of accordion use on the ACC website are on many of the Questions & Answers style pages (ACCeID) throughout the website, and the Degrees and Certificates area.

Please note that the overuse of accordions is detrimental to search results, webpage navigation and other usability issues. If unsure about accordion use, contact the ACC Web Team.

Using the HTML editor in the Drupal editing screen:

paste all of the following code:

<div class="accordion">

<h3>Section 1</h3>
 <div>
 <p>Your content goes here.</p>
 </div>

<h3>Section 2</h3>
 <div>
 <p>Your content goes here.</p>
 </div>

<h3>Section 3</h3>
 <div>
 <p>Your content goes here.</p>
 </div>

<!-- enclosing div -->
</div>

You can add as many sections as you need as long as you add in that last the enclosing div. Leaving this off is going to break your accordion or website layout.

Here is the previous code in action:

Tags: Drupal