{% extends "lizard_ui/lizardbase.html" %} {% block title %}Collapsible headers in sidebar{% endblock %} {% block sidebar %}
{% endblock %} {% block content %}In the sidebar, mark collapsible headers with a "collapsible" class. This adds an icon indicating that the header can be collapsed. When clicked, the very next item (a div, an img, a ul, whatever) is collapsed or expanded.
The sidebar boxes are divs with a class "sidebarbox" and a heading as first element.
You can have an extra header (suggestion: h1) at the top with a class "sidebarheader". This one typically has a "close" button to slide the entire sidebar to the left.
Note on headers: keep the h1-h3 nicely in order. So a sidebar header at the top is h1. Sidebarboxes have a h2. And sub-headers inside the sidebarboxes are h3.