HTML and CSS Reference
In-Depth Information
display property to block. Then I modify the this.innerHTML to read “Collapse All” .
That changes the link text to Collapse All , which not only alters the display, but also
causes the same function to hide all the answers when the user clicks on the link again.
Then the function returns false so that the link itself is not processed.
When the onclick handler is set up, I add the link to the document. I want to insert the
link immediately before the list of frequently asked questions. To do so, I get a reference
to its <div> using getElementById() and then use insertBefore() to put it in the right
faq = document.getElementById(“faq”);
faq.insertBefore(expandAllDiv, faq.firstChild);
Table 15.3 contains a list of methods that can be used to modify the document. All of
them are methods of elements.
TABLE 15.3
Methods for Accessing the DOM
Adds the element to the page as a child of the
method's target
Inserts the element new before the element
ref on the list of children of the method's
insertBefore(new, ref)
Removes the attribute with the supplied name
from the method's target
Removes the child of the method's target
passed in as an argument
Replaces the child element of the method's
target passed as the inserted argument with
the element passed as the parameter
replaceChild(inserted, replaced)
Sets an attribute on the method target with
the name and value passed in as arguments
setAttribute(name, value)
There's one other big change I made to the scripts for the page. I added a call to a new
function in the handler for the click event for the questions on the page:
That's a call to a new function I wrote, which switches the Expand All / Collapse All
link if the user manually collapses or expands all the questions. When the page is
opened, all the questions are collapsed, and the link expands them all. After the user has
Search WWH ::

Custom Search