A script to make header collapsible in markdown post
- Bootstrap
- Standard Jekyll/Hexo Post based on Markdown
Add JS and CSS to your project.
Recommend to put after other JS files.
$.headerCollapseRobot(
arr_Id_CollapseEnds = new Array("end"),
arr_Collapsible_Tag = new Array("H1","H2","H3"),
arr_ExcludeElemPrefix_InCollapsible = new Array("comment-"),
arr_ExcludeElemPrefix_InCollapsing = new Array("sidebar-toc-Ik4D-")
)
Mouseon the header you want to collapse/expand an icon will show.
Click the icon to collapse/expand
Sometimes the posts don't have specific ending tag. You can set BreakId to set the ending elem, otherwise it will collapse all elem after last header.
Here is an exam to stop at an elem id= thisIsTheBreakId when you click the last header.
var arr_Id_CollapseEnds = new Array("thisIsTheBreakId");
If you don't want specific elems to collapse, add some id prefix for those elems and add ignorePrefix here
var arr_ExcludeElemPrefix_InCollapsing = new Array("IDPrefix");
Same as Exclude Elem in Collapsing, the header id with prefix in this array won't active collapsible and no icon added near this header.
To set the level of header which need to be collapse
It have been set to H1-H3 by default. Absolutely the header inside quote will be ignored.
var arr_Collapsible_Tag = new Array("H1","H2","H3");
// var excludeTagList = new Array("");
$('h1, h2, h3').each(function(index, el)……
If wanna add H4 you also need to add for CSS
h1:hover span.headerbtn,
h2:hover span.headerbtn,
h3:hover span.headerbtn{
opacity: 1;
visibility: visible;
}