Skip to main content

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