• Adding a Panel with the KB Editor
• Example
• Adding Panels with HTML

Adding a Panel with the KB Editor

Using the TinyMCE editor in the KB, you can easily add collapsible panels to your document without needing to edit the document's HTML. This button can be found on the right end of the toolbar and under the Insert menu. The icon looks like a plus and minus sign:

After clicking this button, you will be prompted to choose the appropriate heading size for the panel, as well as enter the panel heading text and an optional ID for anchor reference. You will also be able to choose if you would like the panel to be expanded by default. Alternatively, you can use the Add "Expand All" and "Collapse All" buttons only option to add buttons that allow the reader to open or close all panels within a document.

Example

Below is an example of a set of panels that can be used to organize content within a KB document. They are designed with accessibility in mind, so users may navigate to each panel with a keyboard, and ARIA labels will announce their current state.

General Functionality

By default, panels will be collapsed when the page loads, unless certain panels were set to be expanded by default. This can be seen with the first panel in the example.

If the heading for a panel is given an ID, you may also link to the panel directly using an anchor link. If a user follows an anchor link to a panel from another page, the page containing the panels will open directly to the panel in question. Additionally, that panel will be automatically expanded, and the other panels will be collapsed, regardless of their typical default settings. If an anchor link is followed from the same page as the panels, as you can test in the example below, the page will jump directly to that panel, which will also be expanded (note that this does not affect the state of the other panels).

Adding Panels with HTML

This section is provided as a reference only; we recommend using the built-in editor tool to add panels.

To create a panel in a KB document, please follow the steps below while working in the Source mode window in the editor. The first group of steps is required, and the second set includes optional settings for expanding panels by default and creating anchors for panels.

Required Steps

1. Insert a heading tag and give it the class panel-head. Set the text for the heading to whatever you would like displayed as the visible name of the panel, and set the heading size (h2, h3, etc.) as appropriate for the structure of your document.

   <h2 class="panel-head">Section One</h2>

2. Directly below the heading, insert a div tag and give it the class panel-content. Place the desired content inside of this div tag, using any other HTML tags that are needed for formatting.

   <h2 class="panel-head">Section One</h2>
   <div class="panel-content">
     <p>Some content to be displayed inside panel one. This content will be shown/hidden as the panel is toggled.</p>
   </div>

3. Paste the following into the JavaScript/CSS field (located under "Additional Fields"):

   <script src="/cssjs/jquery/current/jquery.min.js"></script>
   <script type="text/javascript" src="/cssjs/simple-collapsing-panels.js"></script> 
   <link rel="stylesheet" type="text/css" href="/cssjs/simple-collapsing-panels.css">

Optional Settings

1. To add buttons to expand and collapse all panels at once, paste the following above and/or below your panels:

   <button id="expandAll" type="button">Expand All</button>
   <button id="collapseAll" type="button">Collapse All</button>

2. If you would like a panel to be expanded by default when the page is loaded, add the class "expanded" to the heading tag, e.g.:

   <h2 class="panel-head expanded">Section One</h2>

3. If you would like to anchor to a panel from a link (either on the current page or from a different page), add an ID to the heading tag with the desired anchor text, e.g.:

   <h2 class="panel-head" id="section-one">Section One</h2>

   You may then reference the heading tag in an anchor link, e.g.:

   <a href="#section-one">Section One</a>

   Note: If you link directly to a panel from a different page, the linked panel will be expanded and all other panels will be collapsed when the page loads. If you link to a panel from the current page, the linked panel will be expanded (other panels will not be collapsed if already opened).