HTML and CSS Reference
In-Depth Information
The initial code for the expandCollapse() function to toggle the plus/minus symbol
between the + and - symbols is as follows:
function expandCollapse() {
if (this.innerHTML == “-”) {
this.innerHTML = “+”;
} else {
this.innerHTML = “-”;
}
Note that the function uses the this keyword to reference whatever plus/minus box was
clicked by the user. You'll add the function to the toc.js file now and then test your code
in the browser.
To insert the expandCollapse() function:
1. Return to the toc.js file in your text editor.
2. Scroll to the bottom of the file, and then insert the following function as shown in
Figure 14-48:
function expandCollapse() {
if (this.innerHTML == “-”) {
/* Collapse the nested list, hiding the contents
and changing the character to + */
this.innerHTML = “+”;
} else {
/* Expand the nested list, displaying the contents
and changing the character to - */
this.innerHTML = “-”;
}
}
Figure 14-48
toggling the character symbols
3. Save your changes to the file, and then reload usconst.htm in your Web browser.
Verify that clicking each plus/minus box toggles its symbol between a plus sign
and a minus sign.
 
Search WWH ::




Custom Search