Accordion
Accordions are collapsible blocks that are helpful in organizing plenty of content on a page. They will remain hidden until the user clicks onto them.
An example of an Accordion is shown below:
-
You can insert your text here
-
Or images like this:
-
Or even tables like this:
Header Header Header Test Test Test Test Test Test
How to add Accordion to my page?
- Enabling Accordion on the schools site
Schools would need to first inform us to enable it on their site. (If you have Accordion on other pages, it means that it is already enabled.) - Starting Accordion on the page
Next, on the page that you will like to add Accordion, insert <ul class="jekyllcodex_accordion"> to start the accordion code. Remove the \ so that the code works! - Starting Accordion Item
To start an Accordion item, insert the following where # is a unique number.
<li><input id="accordion#" type="checkbox">
<label for="accordion#">Insert Accordion title here</label><div> - Inserting Accordion content
To insert content in the accordion, you can use the paragraph tags such as: (Note that you cannot use another <div></div> tags as it will confuse the system.)
<p>Insert content here</p> - Closing Accordion item
To close the Accordion item, insert the following tags:
</div></li> - Adding Additional Accordions
Repeat steps 3-5 for additional accordion items (note that # must be a unique number on the page) - Closing Accordion on the page
Finally to close the Accordion code, insert </ul> at the end.
In summary, your html code should look something like this:
<ul class="jekyllcodex_accordion">
<li><input id="accordion1" type="checkbox">
<label for="accordion1">Insert Accordion Title here</label><div>
<p>Insert content here</p>
</div></li>
<li><input id="accordion2" type="checkbox">
<label for="accordion2">Insert Accordion Title here</label><div>
<p>Insert content here</p>
</div></li>
<li><input id="accordion3" type="checkbox">
<label for="accordion3">Insert Accordion Title here</label><div>
<p>Insert content here</p>
</div></li>
</ul>