HTML and CSS Reference
In-Depth Information
Retrieves the element with the specified ID. IDs are
assigned using the id attribute. This is one of the
areas where JavaScript intersects with CSS.
Retrieves elements with the specified value as their
name attribute. Usually used with forms or form fields,
both of which use the name attribute.
To set up the expanding and collapsing properly, I must hide the answers to the questions
and bind an event to the questions that expands them when users click them. First, I need
to look up the elements I want to modify in the DOM.
faqList = document.getElementById(“faq”);
answers = faqList.getElementsByTagName(“dd”);
The first line gets the element with the ID faq . That's the ID I assigned to my definition
list in the markup. Then the next line returns a list of all the dd elements that are children
of the element now assigned to faqList . I could skip the step of looking up the faq list
first, but then if this page included multiple definition lists, the behavior would be
applied to all of them rather than just the faq . This is also a useful precaution in case this
JavaScript file is included on more than one page. In the end, I have a list of dd elements.
Changing Styles I grabbed the list of dd elements so that they can be hidden when
the page loads. I could have hidden them using a style sheet or the style attribute of each
of the dd elements, but that wouldn't be unobtrusive. If a user without JavaScript visited
the page, the answers to the questions would be hidden, and there wouldn't be any way
to reveal the answers. It's better to hide them with JavaScript.
There are two ways to hide elements with CSS, you can set the display property to none
or the visibility property to hidden . Using the display property will hide the element
completely, the visibility property hides the content in the element but leaves the
space it takes up empty. So for this case, using the display property makes more sense.
Every element in the document has a style property, and that property has its own prop-
erties for each CSS property. Here's the code that hides each of the dd elements:
for (i = 0; i < answers.length; i++) {
answers[i].style.display = 'none';
The for loop iterates over each of the elements, and inside the loop, I set the display
property to none . When the page loads, the answers will be hidden.
Search WWH ::

Custom Search