CSS + JS make foldable content Blocks

Code Parsing

HTML code

<Div class = "save">

<H1> <a href = "javascript: void (0)" class = "dsphead"
Onclick = "DSP (this)">
<SPAN class = "dspchar"> + </span> heading </a> <Div class = "dspcont"> section </div>
<! -- The preceding part is the first heading. An onclick In H1 triggers the DSP (LOC) function in JS. The initial + number is in the <span> where the class is dspcont, the hidden content is in the DIV whose class is dspcont -->

<H1> <a href = "javascript: void (0)" class = "dsphead"
Onclick = "DSP (this)">
<SPAN class = "dspchar"> + </span> heading </a> <Div class = "dspcont">

<H2> <a href = "javascript: void (0)" class = "dsphead"
Onclick = "DSP (this)">
<SPAN class = "dsphead"> + </span> heading </a> </H2>
<Div class = "dspcont"> section </div>

<H2> <a href = "javascript: void (0)" class = "dsphead"
Onclick = "DSP (this)">
<SPAN class = "dspchar"> + </span> heading </a> </H2>
<Div class = "dspcont"> section </div>
</Div>
</Div>

CSS code

. Save {
Behavior: URL (# default # savehistory );}
/* Prevent text content in the range from being cleared during backoff. [why is this used here not very clear...] */

A. dsphead {
Text-Decoration: none;
Margin-left: 1.5em ;}
/* Set the connection style */

A. dsphead: hover {
Text-Decoration: underline ;}
/* Connection hover status */

A. dsphead span. dspchar {
Font-family: monospace;
Font-weight: normal ;}
/* Set the head and symbol font */

. Dspcont {
Display: none;
Margin-left: 1.5em ;}
/* Set the initial style of the content part, and display is none */

JS Code

<SCRIPT type = "text/JavaScript"> <! --
Function DSP (LOC ){
If (document. getelementbyid ){
FOC = LOC. firstchild. innerhtml?
Loc. firstchild:
Loc. firstchild. nextsibling;/* Set foc to the innerhtml of the next child element of the current vertex, that is, the innerhtml with the + symbol <span> */
FOC. innerhtml = (FOC. innerhtml = '+ ')? '-': '+';/* Determines whether the content in <span> is "-" or "+". If it is "+", it changes to "-" or */
FOC = LOC. parentnode. nextsibling. style?
Loc. parentnode. nextsibling:
Loc. parentnode. nextsibling. nextsibling;/* move the judgment position to the <A> parent (hidden Div behind H1 )*/
FOC. style. Display = FOC. style. Display = 'block '? 'None': 'block';}/* determines whether the display of the DIV is none or block, and sets it to the opposite value */}

If (! Document. getelementbyid)
Document. Write ('<style type = "text/CSS"> <! -- \ N' +
'. Dspcont {display: block;} \ n' +
'// --> </Style> ');
// --> </SCRIPT>/* display all the hidden content in browsers that do not support DOM */

<NoScript>
<Style type = "text/CSS"> <! --
. Dspcont {display: block ;}
// --> </Style>/* display hidden content in browsers that do not support js */
</NoScript>