Skip over navigation

Collapsible Content

A popular technique for pages with a question and answer format is to use JavaScript to collapse all of the answers. A click or touch event on a question expands the answer. “Open All“ and “Close All” links expand and collapse all of the answers at once. Visitors with JavaScript disabled and printers see all answers expanded.

The example below leverages Text & Picture components, an XSL file that adds some JavaScript, and CSS.

Instructions

  1. Create a new blank page as you normally would in the Insite Editor.
     
  2. Switch to the Content Editor and navigate to the following directory:
    1. /common/code/faq/ (Dept A)
    2. /common/code/faq/ (Dept B)
  3. Copy the cms-common.xsl file in that directory over to the directory with your new page.
     
  4. Edit content on your new page to insert a Text & Picture component for each FAQ item.
    1. You must use the Title field and the Text field only. The other fields will break the script.
    2. You must switch to the Only text variant.
  5. You can use one or more RXML components with HTML tags for content outside of the FAQ list, such as a <h2>header</h2> and some intro text. You can place an RXML component above the Header component, if desired.
     
  6. You need to have a Header component. By default, the Open All/Close All links will be generated immediately after the Header component. If you choose to add your page’s header text inside of the RXML component, use a space for the title of the Header component.
     
  7. Add custom styling as needed to your custom.css file. You would need to override elements with the #content.collapsing-items selector.

What is an FAQ?

Frequently asked questions, abbreviated to FAQ, are listed questions and answers, all supposed to be commonly asked in some context, and pertaining to a particular topic. The format is commonly used on email mailing lists and other online forums, where certain common questions tend to recur.

How do you pronounce FAQ or FAQs?

“FAQ” is pronounced as either an initialism (F-A-Q) or an acronym. Since the acronym FAQ originated in textual media, its pronunciation varies; “fack,” “faak,” “fax,” and “facts” are commonly heard.

What is Roxen?

Roxen is a free software web server produced by Roxen AB, a company based in Linköping, Sweden, and named after the nearby lake Roxen. Roxen CMS is a modular, XML-based content management system that runs on top of this web server.

Lake Roxen
Lake Roxen; Source: Wikipedia

Additionally, Roxen (Urdu: روظن, literal English translation: “hope”) is a Pakistani rock band from Lahore, Punjab, Pakistan.

Where was the text from these FAQs copied from?

The text came from the following Wikipedia articles: