Subsections

6 min read

Accordions (Collapsible Sections)

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.

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
Note

Since you may want to use a topic as a main topic (without the accordion), it is not recommended to set accordions on a top-level section.

Note

When accordions are applied to top-level sections, they will not be shown in the output's (HTML5) side navigation when added to the publication structure. Instead, they will appear as an accordion section in the parent topic.

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.

    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.

  4. Enter Role and select it from the menu.

  5. Enter accordion as the role attribute value.

  6. Select Save.

  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).

  • Set the container topic to have xlink:role=accordion on the xi:include element.

    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 topic containing another topic as a subsection. The subsection topic has been inserted as a component and is shown as 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 Import element in the Element Structure Menu and then select Go to element.

  4. In the Element attributes panel, select the section element and choose the xi:include element instead.

    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.

  5. Use Add attribute to give the xi:include element the xlink:role attribute. Set the value of the xlink:role attribute to accordion.

  6. Select Save.

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 it is also set to have xlink:role="accordion" in the other locations).

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 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.

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

    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.