Accordion Menu Example

Here is an example of code for an accordion menu. Use this for long landing or informational pages, or large multi-step SOPs. This is a brief, lay terms description. For more options and detail, visit the KB user guide (link below).

Adding This To Your Document

Switch into Code View and identify where you would like the panels. In the new editor, the button for Code View is a pair of brackets in the upper-right corner. In the old editor, it is the "HTML" button in the lower left corner. Open this document (Accordion Menu Example) for editing, as well as the document to which you would like to add an accordion menu. Switch both documents to code view. Copy the code from this document to yours. Then, after making sure you are editing your own document and not the template, replace the explanatory text in your own document with the text you would like to use.

But Wait! There's More

Scroll down in the editor on this page, and click "Show Additional Fields." On the bottom is the "JavaScript/CSS" field. Copy all of this text and place it into the same field on your own document.

Another consideration: whenever possible, try to make your edits in Code View to avoid erasing something or adding something outside the tags. Make sure all the text for your panel is within the <div> </div> tags. Do not make new lines in Design View. Make new lines in code view by typing <br>. Quick text edits can be made without switching to code view, but it may behoove you for this and other KB editing projects to learn a very little bit of basic HTML. Among many other resources, December.com and YouTube have great resources available.

Oh no! My accordion menu needs to have more than three panels! What can I do if I don't know any HTML, Javascript, or CSS?

No fear! Simply copy the entire tag of another panel (as pictured) and paste it below. Then, replace the text with the new text.
accordionmenucode.PNG


Contact Ian Canovi for help.

Document History

Version Date Effective Date Change Reason Primary Author
April 1, 2020 Created Ian Canovi



Keywordsaccordion,menu,code,help,template,design,menu,landing page,sop,   Doc ID99848
OwnerIan W.GroupWisconsin Alzheimer’s Program
Created2020-04-01 11:09:25Updated2023-01-10 14:03:34
SitesWisconsin Alzheimer’s Program
Feedback  0   0