HTML and CSS Reference
In-Depth Information
expanded them all one at a time, this function will switch the link to
Collapse All
. The
function is called every time the user clicks on a question. It inspects the answers to
determine whether they are all collapsed or all expanded, and adjusts the link text
accordingly. Here's the source for that function:
15
function updateExpandAllLink() {
var faqList, answers, expandAllLink, switchLink;
faqList = document.getElementById(“faq”);
answers = faqList.getElementsByTagName(“dd”);
expandAllLink = document.getElementById(“expandAllLink”);
switchLink = true;
if (expandAllLink.innerHTML == “Expand All”) {
for (i = 0; i < answers.length; i++) {
if (answers[i].style.display == 'none') {
switchLink = false;
}
}
if (switchLink) {
expandAllLink.innerHTML = “Collapse All”;
}
}
else {
for (i = 0; i < answers.length; i++) {
if (answers[i].style.display == 'block') {
switchLink = false;
}
}
if (switchLink) {
expandAllLink.innerHTML = “Expand All”;
}
}
}
This function starts with some setup. I declare the variables I will be using, and retrieve
the elements I need to access from the DOM. I also set the variable
switchLink
to true.
This variable is used to track whether I need to switch the link text in the
Expand All
link. When everything is set up, I use an
if
statement to test the state of the link. If the
link text is set to
Expand All
, it checks each of the answers. If any of them are hidden, it
leaves the link as is. If all of them are displayed, it changes the link text to
Collapse
All
. If the link text is already
Collapse All
, the test is the opposite. It switches the link
text to
Expand All
if all the questions are hidden.
▲
