Articles in this section

Accordions (Collapsible Sections)

Avatar
Anders
  • Updated
Follow

Accordions are sections of content that can be expanded or collapsed for HTML5 or Zendesk output. They are useful when you have a lot of subsections that make it hard to overview the topic. The reader can then expand or collapse each section in turn.

You can use accordions on sidebar elements and section elements. But for sections, the accordion only appears when that topic is inserted into another topic as a subsection, see Insert Component.

Paligo Accordion (Collapsible Sections)

Create Accordions

Paligo supports accordions (collapsible sections) for HTML5 and Zendesk output. In other output formats, the content will appear as regular text. You can create accordions for topics (section elements) and informal topics (sidebar elements).

There are two ways to create an accordion. Use the way that matches what you want to achieve:

When creating an accordion, use Preview to test that it works, see Test your Accordions.

Set an Accordion on a Section Element

If you want a topic to use an accordion wherever that topic appears, give the topic's section element a role attribute with value set to accordion:

  1. In the Content Manager, find the topic (or informal topic) and select it to open it in the editor.

  2. In the Element Structure Menu, select a section element or sidebar element and then select Go to element.

    section-gotosection.png

    Note

    It is possible to have multiple section elements in a topic. The first (leftmost) section represents the topic as a whole. Any other section elements are for subsections inside the topic. We recommend that you create subsections by inserting a topic as a component inside another topic rather than create a section inside a section.

  3. Select Add attribute in the Element Attributes Panel.

    select-add-attribute.png

  4. Enter Role and select it from the menu.

    add-role-to-section.png

  5. Enter accordion as the role attribute value.

    set-role-accordion.png

  6. Select Save. Save icon.

  7. Select Layout and then select the Layout you are going to use for publishing. Make sure that the Output role attribute as class names setting is enabled (for details, see Enable Output Role Attribute as Class Names). Accordions will not work if this setting is disabled.

When you publish to HTML5 or Zendesk, the section or sidebar will appear as an accordion (when it is a subsection of another topic).

Tip

You can style the accordion by using custom CSS.

For example, if you want a background color for the header, create a CSS file (or edit an existing one) and use:

.panel-default > .panel-heading { background-color: #fafafa; padding: 1em; }

You can then upload the CSS to your Layout (see Upload Customized CSS).

Set an Accordion on an Imported Subsection Topic

If you create subsections by inserting a topic inside another topic, you can set the subsections to display as an accordion. There are two ways to do this:

  • Set the subsection topic to have role:accordion on its section element. This makes the topic display as an accordion wherever it is used (see Set an Accordion on a Section Element).

  • Edit the source code for the container topic ("parent" topic) and set the xi:include element for the subsection to have xlink:role="accordion". This makes the subsection topic display as an accordion, but only when it is used as a subsection in this particular "parent" topic. If the subsection topic is also used elsewhere, it will not display as an accordion in those other locations (unless you set it up to have an accordion in those places too).

To edit the source code for the "parent" topic and make an imported subsection display as an accordion:

  1. In the Content Manager, find the "parent" topic that contains the subsection ("child" topic). Select the "parent" topic to open it in the editor.

  2. Click on the subsection ("child" topic) and then look in the Element Structure Menu at the top. Make sure that the subsection is represented by an import element in the structure of the topic.

    A "parent" topic that contains another topic as a subsection. A callout box highlights the import element in the Element Structure Menu. Another callout box highlights the subsection "child" topic.

    A topic containing another topic as a subsection. The subsection topic has been inserted as a component and is referenced by an import element.

    If you do not see an import element, it is likely that the subsection has been created in another way. For example, added as a section element inside the "parent" topic. You can convert it into an inserted component by selecting its section element and then choosing Convert to reusable component. Paligo will convert the section into a separate topic and add an import element in its place.

  3. Select the Edit tab in the toolbar.

    Toolbar_Edit_small.png

  4. Select Edit source code. Edit_Source_Code_small.png

  5. In the Source Code Editor, find the reference to the subsection topic ("child"). It is shown as an xi:include element and it contains an xi:fallback element with a para element inside it, like this:

    <xi:include xmlns:xi="http://www.w3.org/2001/XInclude" parse="xml" href="UUID-17301a40-98ec-d396-2c42-1880b82e5358">
    <xi:fallback>
      <para xinfo:translate="no">Reusing topic #UUID-17301a40-98ec-d396-2c42-1880b82e5358</para>
    </xi:fallback>
  </xi:include>

    Note

    If your "parent" topic contains many imported subsections, it will have an xi:include element for each one. They are shown in the order they appear in the "parent" topic. Make sure that you are looking at the xi:include for the subsection you want to edit.

  6. Add xlink:role="accordion" to the xi:include element. It should come after the href attribute and value. For example:

    <xi:include xmlns:xi="http://www.w3.org/2001/XInclude" parse="xml" href="UUID-17301a40-98ec-d396-2c42-1880b82e5358" xlink:role="accordion">
    <xi:fallback>
      <para xinfo:translate="no">Reusing topic #UUID-17301a40-98ec-d396-2c42-1880b82e5358</para>
    </xi:fallback>
  </xi:include>

  7. Select Update.

    If the source code is valid, Paligo saves it and closes the Source Code Editor. If the code is invalid, Paligo displays a notification. Check the code carefully for any errors and correct them.

  8. Select Save. Save icon.

When you publish your content, or preview it as HTML5, the subsection will display as an accordion. If you use the subsection topic elsewhere, it will not display as an accordion*.

*unless those other locations are also configured to have xlink:role="accordion".

Test your Accordions

When you set up a new accordion, it is a good idea to test it works as expected before you publish. You may find that you have made a mistake and the accordion is not working or that you have included information in the accordion that needs to be elsewhere.

To test an accordion:

  1. In the Content Manager, select the "parent" topic that contains the subsection topic that has the accordion. Paligo opens the topic in the editor.

  2. Select Preview and then HTML5.

    Paligo editor toolbar. The Preview tab is selected and highlighted. The HTML5 option on the Preview tab is highlighted too.

    Paligo opens a preview in an new tab.

  3. Select HTML5.

  4. If you have set up the accordion correctly, the subsection topic is displayed as an accordion. You can only see its title and there is an arrow icon next to it.

    A topic displayed in a preview. It has its main heading shown, a paragraph of text, and then the heading for a subsection. There is an arrow next to the subsection heading. The content of the subsection is hidden.

    If you select the subsection topic's title or the arrow icon, it should expand the accordion, revealing the content in the topic.

    A topic displayed in a preview. It has its main heading shown, a paragraph of text, and then the heading for a subsection. There is an arrow next to the subsection heading. The content of the subsection is displayed as the accordion is expanded.

    If the accordion is not working as expected, check that you have set up the accordion correctly (see Set an Accordion on a Section Element or Set an Accordion on an Imported Subsection Topic). Look out for typing mistakes in the role attribute values and make sure you have applied the role to the correct element.

Expand All Accordions

If you want all accordions to expand when a page in the HTML5 Helper Center output is loaded, add the following code to your custom JavaScript:

// Expand accordions
$(document).ready(function () {
    $('.accordion .collapse').collapse('show');
    $('.accordion .panel-heading').addClass('active');

    // Uncomment below if you're using AJAX
    /* $(document).ajaxComplete(function() {
            $('.accordion .collapse').collapse('show');
            $('.accordion .panel-heading').addClass('active');
    }); */
});

Note

This script will apply to accordions on any page and will only work for HTML5 Helper Center output.

Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk