This document briefly summarizes what is required to add collapsible sections to a GitHub Flavoured Markdown file. The collapsible sections function when viewed on GitHub Pages, but they will not work when viewed on GitHub itself.
### e.g. in README.md
**This should be placed at the bottom of the markdown document**
**This will look ugly when viewed on GitHub, but won't be visible on GitHub Pages**
```javascript
```
### e.g. in collapse.css
```css
/* Style the button that is used to open and close
the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: 5px;
text-align: left;
outline: none;
font-size: 24px;
}
/* Add a background color to the button if it is clicked on
(add the .active class with JS), and when you move the
mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 18px 18px 18px 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
border: 2px solid #444;
border-radius: 5px;
}
```
### e.g. in README.md
**Note that the left alignment of the tags is important!**
**Also, the line spacing is important if you want it to look reasonable on GitHub.**
```html
```
For a working example, see this document as viewed on GitHub Pages:
* [https://oclipa.github.io/collapsible-sections-for-gfm/](https://oclipa.github.io/collapsible-sections-for-gfm/)
The raw markdown can be viewed here:
* [https://raw.githubusercontent.com/oclipa/collapsible-sections-for-gfm/master/README.md](https://raw.githubusercontent.com/oclipa/collapsible-sections-for-gfm/master/README.md)
------
**Move along; nothing to see here...**