Accordion Menu Example
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.
Contact Ian Canovi for help.
Document History
Version Date | Effective Date | Change Reason | Primary Author |
April 1, 2020 | Created | Ian Canovi |