Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Page Properties


Description

An information page should be the final destination of a visitor, which means it can be long. This means the visitor may need to scroll a lot. You can help the visitor by grouping the content and adding what’s known as an accordion, an expandable area. The accordion collapses its content into headings. When the visitor clicks a heading, the content is expanded.

The accordion is a component that can be used with Layout Builder in the “Information” section and is placed below the body text. This applies to the “Information page” and “Research page” content types.




Page Properties
hiddentrue


Highlight

<<Tillbaka



Do as follows:

In this example, we describe how to add an accordion to an existing information page.

  1. With the page open, click “Layout” in the row of tabs.

  2. To add an accordion, scroll past the content you added in the Edit tab (title, summary and body text). The header image or header video is never shown in layout mode.
  3. Add component
    Click the “Add component” link on the left of the two-block section.



  4. Select the Accordion component
    In the list of components on the right, select the “Accordion” link.

    Image Added

  5. Configure component
    1. Heading
      Enter the heading in the “Heading” field that appears.
    2. Heading level
      Specify the heading size in the “Heading level” field: H2, H3 or H4. Regardless of which heading level you choose, to visitors it will appear the same, although it will be coded as H2, H3 or H4.
    3. Content
      Add your text content.
    4. Save
      Click the blue “Add component” button to save.
  6. If you want to add more than one accordion, simply repeat the process.
  7. Now publish the changes made to the page by selecting “Published” and clicking the blue “Save changes” button.
  8. To preview the page, click “Display” in the row of tabs. Here’s an example with five accordion components.




Page Properties
hiddentrue


Info
titleViktigt att tänka på




Page Properties
hiddentrue

Felsökning



Page Properties
hiddentrue

Relaterade artiklar

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@1086d
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel = "Genomgångssida" and type = "page" and space = "DIR"
labelskb-how-to-article