Expandable/Collapsible menu

1. What is a collapsible menu?
2. How do you add an expand and collapse button in HTML?
3. How do you collapse a menu in CSS?
4. What is collapsible list?

What is a collapsible menu?

A collapsible menu is a vertical list menu that collapses down to expandable menu titles when displayed on mobile devices. These are used almost exclusively in the footer and can be used in grids to make columns of collapsible menus.

How do you add an expand and collapse button in HTML?

To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).

How do you collapse a menu in CSS?

Collapse & Expand

Now we just have to set the default state of the menu to be collapsed when when checkbox is not checked. We do this by changing the max-height of . menu-content to 0 , but have it display a max-height of 100% when the checkbox is checked. That's it!

What is collapsible list?

A collapsible list will show and hide a given section of content when its heading is clicked. The collapsible list will appear initially as a series of Heading 5s or Heading 6s with an arrow next to each. Click a heading once to expand the content, and again to close it.