How to Implement Accordion inside Knowledge Article
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎01-30-2015 05:16 AM
Hi All,
I want to implement Accordion panel in knowledge article through tiny MCE Editor.
Please suggest me something to achieve this functionality.
Any help would be appreciable.
Thanks in Advance!
Regards,
Atul Chauhan
- Labels:
-
Integrations
-
User Interface (UI)
- 3,656 Views

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-18-2018 11:21 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎02-24-2020 11:20 AM
Do you have a sample for the source code to include for an accordion inside the knowledge article? Thanks!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎07-09-2020 02:42 PM
I have the same question. Anyone have any good starter code that also includes ability to "expand +/collapse -) all? It's too bad the text editor doesn't have an easy way to build accordions or anchor links.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎01-05-2022 08:10 PM
Hi, I have been successfully using this code:
<div id="btn_New"><img style="float: left; pointer-events: none;" src="btn_New.png" width="176" height="50" />
<p style="float: left; margin-top: 10px; padding: 0px 10px 10px 10px; width: 75%; margin-left: 10px; border-radius: 5px; font-family: 'arial black', 'avant garde'; font-size: 14pt; color: #e26b0a;">Essential Process Information for New or Casual Users</p>
<p style="clear: both;"> </p>
</div>
<!-- Start Dropdown --><details style="cursor: auto;">
<summary style="cursor: pointer; margin-left: 50px; padding: 0px 10px 10px 10px; width: 70%; height: 30px; border-radius: 5px; border: 1px solid white; background-color: #f9f6fc; font-family: 'arial black', 'avant garde'; font-size: 14pt; color: #800080;"><strong>Introduction and Essentials</strong></summary>
<p style="margin-left: 80px; font-family: verdana, geneva; color: #000000; font-size: 12pt;">Please contribute!</p>
<p> </p>
to produce
When you click the "Introduction and essentials text, it reveals the drop-down text
Note: the <details style="cursor: auto;"> by default, will show the accordion as closed. If you want the accordion to show as open or expanded then change it to
<details open="open"> The cursor: auto; tage above changes the cursor to a pointy finger rather than a arrow to let you know that you can action it.
all the best,