Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

Accordion Drop-down

Article ID: ITSKB-3-200

Article Purpose

This is an advanced CMS topic for CMS authors with HTML access. All other authors can request assistance from the ITS Web Apps team in setting up the JQuery accordion drop-downs.

In this article we will create a Frequently Asked Question (FAQ) using the JQuery Accordion drop-downs to display our Questions and Anwsers.

 

Needed Materials

Steps to Resolution

Option 1 - Modify example code in CMS

  1. Log in and Work on a CMS page
  2. Click the "Gear Icon" for the formatted text block that you want the accordion drop-down to appear.
  3. Click "Text"
  4. This brings up the "Formatted Text Block" dialog
    1. "Copy" the example code from the addition information section of this article
    2. Click the "Show/Hide HTML" icon in the CMS Rich Text Editor
    3. "Paste" in the example code provided
    4. "Modify" the HTML code for your Frequently Asked Questions. Make sure not to delete any of the divs.
    5. You can change the color of the Accordion Questions by using the following options
      • UAA Green Option - class="js-accordion-uaagreen"
      • UAA Gold Option - class="js-accordion-uaagold"
  5. Click "Save"
  6. "Submit" your page/element when you are finished

Now when you preview your page you will see a formatted text block that has the accordion drop-downs for each question in the FAQ.

Option 2 - Modify example code in code editor

  1. "Copy" the example code from the addition information section of this article
  2. "Modify" the HTML code for your Frequently Asked Questions in your editor of choice such as Dreamweaver, Notepad++, Brackets, or plain old notepad/text edit
    • Questions are wrapped in <h3> tags
    • Anwsers are formatted appropriately then wrapped in a containing <div>
    • Wrap the entire FAQ with a containing <div class="color option">
    • You can change the color of the Accordion Questions by using the following options
      • UAA Green Option- class="js-accordion-uaagreen"
      • UAA Gold Option - class="js-accordion-uaagold"
  3. Log in and Work on a CMS page
  4. Click the "Gear Icon" for the formatted text block that you want the accordion drop-down to appear.
  5. Click "Text"
  6. This brings up the "Formatted Text Block" dialog
    1. Click the "Show/Hide HTML" icon in the CMS Rich Text Editor
    2. "Paste" in the example code that you modified in your code editor
  7. Click "Save"
  8. "Submit" your page/element when you are finished

Now when you preview your page you will see a formatted text block that has the accordion drop-downs for each question in the FAQ.

Additional Information

​Example code for JQuery accordion drop-downs in the CommonSpot Content Management System

<div class="js-accordion-uaagreen">
    <h3>Question 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3>Question 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
    </div>
    <h3>Question 3</h3>
    <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Question 4</h3>
    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
        <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>

Did this article answer your question?

For additional assistance Contact the IT Call Center at 786-4646.