KB User's Guide - Advanced HTML - Creating Collapsing and Expanding Panels

This document describes how to add expandable/collapsible panels to a KB 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. However, you may set certain panels to instead 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).

Please see the instructions below for more information on how to become authorized for our very important service, as well as instructions for installation and getting support. You may use the links above to jump directly to a section.

How to Obtain Authorization

Background:

This service requires that you submit an authorization form in order to get access.

Procedure

  • Obtain the necessary form. This form is available at https://www.google.com.

  • Turn in the form to your supervisor. Your supervisor will enter your permissions into the correct system.

  • Wait for a confirmation email. Use the link in the confirmation email you receive to access the system.

How to Install

Background:

This service has a simple, three-step installation procedure.

Procedure

  1. Get the installation file from your departmental IT group. If your departmental IT does not have the file available, please contact the DoIT Tech store.

  2. Launch the installation file from your computer. A window will appear prompting you for more information.

  3. Click 'Install' and wait for the install to complete. The process should take around 10 minutes.

How to Get Help

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum convallis dolor ut aliquam. Sed dignissim in est vel volutpat. Maecenas ac nulla urna. Morbi sed pulvinar mauris, vel dictum augue. Nulla facilisi. In sem nibh, accumsan eget metus a, bibendum mollis dolor. Morbi ac sapien eu turpis condimentum venenatis in vitae dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum facilisis faucibus diam, nec posuere eros mattis elementum. In hac habitasse platea dictumst. Ut lobortis lorem non porta maximus. Curabitur at viverra nibh. Aliquam ut vulputate nulla. Integer et nibh id lacus maximus pellentesque. In congue, ante et sollicitudin ultricies, nisl metus semper ipsum, vitae vehicula dolor neque id libero. Phasellus a pellentesque nibh.

How to Add Panels to Your KB Document

To create a panel in a KB document, please follow the steps below. 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.

    <h3 class="panel-head">Section One</h3>
  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.

    <h3 class="panel-head">Section One</h3>
    <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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/images/group41/shared/DownloadableCSSandJSFiles/simple-collapsing-panels.js"></script> 
    <link rel="stylesheet" type="text/css" href="/images/group41/shared/DownloadableCSSandJSFiles/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">Expand All</button>
    <button id="collapseAll">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.:

    <h3 class="panel-head expanded">Section One</h3>
    
  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.:

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

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




Keywords:adding inserting collapse collapsible expandable accessible toggle toggling bars section show hide click jquery javascript js   Doc ID:73277
Owner:Leah S.Group:KB User's Guide
Created:2017-05-12 14:37 CSTUpdated:2019-04-11 10:51 CST
Sites:KB Demo, KB User's Guide
Feedback:  1   1