Collapsible/Accordion section code snippet

Use this HTML code to add a collapsible article using the web standard Details element to a CMS page.

A common use for this code snippet is to create digital brand guidelines or FAQs, but you can use it to break up any long text or pages into smaller chunks that can make digesting long form content more comfortable for users.

Here’s an example:

Example Collapsible/Accordion code snippet

It is intended for use inside an HTML section, in a custom page built in the Brandkit CMS.

The code utilises the web standard details and summary elements. In addition we have added system wide CSS and standard icons (+ and -) as open and collapse buttons. So it’s ready to use out of the box.

You can access the code in the CMS editor.

  1. Create a new HTML section in a page in the Brandkit CMS.
  2. For the Body input, expand the Pre-built Code Snippets (using the arrow just above the Body input box).
  3. Scroll down and expand the Collapsible/Accordion section.
  4. Copy and Paste the code into the body - then edit as required.
  5. Save the section.
  6. Repeat this snippet in separate html section or even in the same HTML section as needed.
  7. Adjust styling in your portal’s Theme (or in the page specific CSS if you want that style to appear only in the current page).
bk2-collapse-code-snippet

Code Snippet

<details>
  <summary>
    Add your title here...
  </summary>
  Add your copy here...
</details>

Remember to set your style for Details and Summary (aka Title) in your CSS Theme.

Happy coding :)

Collapsible Accordion Section Code Snippet

A screenshot of an example digital brand guidelines created using the copy and paste-able collapsible/accordion section code snippet available in the Brandkit CMS.

Asset type post
ID 603925
Word count 267 words

Licence

Licence Worldwide Paid and Unpaid Available to anyone for royalty free use in paid and unpaid media worldwide, provided Brandkit benefits from such use, and Brandkit.com (or the named Credit if provided) is credited.
Expiry No expiry date
Released
Added at

Tags

Join 176,223+ users already on Brandkit

Your story matters. Help your collaborators find your content, tell your story with confidence, and build a stronger brand.

All for a reasonable and fair price. See pricing here.

 

Subscribe to Updates Tour Book a Demo

Statistics above last updated 1 March 2024


Independent Reviews via Gartner Group

Capterra review badge

"Easy to use."

GetApp review badge

"Great value product."

Software Advice Review Badge

"Great to work with."