HTML and CSS Reference
In-Depth Information
Figure 6-18. The link at the end of the first paragraph toggles the display of the second paragraph
When “Hide details” is clicked, the JavaScript function replaces the show class with the hide class, changing
the second paragraph's display property from block to none . As a result, the paragraph is removed from display,
and the third paragraph moves up into its place, as shown in Figure 6-19 .
Figure 6-19. The middle paragraph is removed completely from the page
Clicking “View details” switches the classes applied to the second paragraph, restoring it and moving the
third paragraph back down to make room for it.
Not Controlling CSS with JavaScript is beyond the scope of this topic, but the code is included in the ch06
folder for you to examine. if you'd like to learn more about using JavaScript to enhance your web pages with
dynamic effects, take a look at DOM Scripting: Web Design with JavaScript and the Document Object Model, 2nd
Edition by Jeremy Keith with Jeffrey Sambells (friends of Ed, iSBn: 978-14302-3389-3).
Search WWH ::

Custom Search