Text Element
To expand and collapse a text element in an HTML page, you first have to include the text content. The following sample code demonstrates including a paragraph element with some demonstration text in it:
Here is some text
The opening paragraph tag includes an ID attribute so that the JavaScript code for the page can identify the element, altering its appearance. The paragraph could optionally contain a much longer section of text. The element does not need to be a paragraph, with many other options including <div> elements.
Interaction
To give the user control over whether the text is expanded or collapsed, you need to include an interactive element. This can be an HTML input element or any element the user can click, such as an image. The following code demonstrates a button input element, which can be included before or after the text element:
The button appears with "show/hide" displayed on it so that users understand its purpose. When the user clicks the button, the browser will execute a JavaScript function named "toggleText" which will also be included within the page code.
JavaScript Function
The page head section can include a JavaScript function to execute on user interaction with the button element. The following JavaScript section can appear between the opening and closing <head> tags in the page:
This code includes the function indicated within the "onclick" attribute for the button element. The script section first creates a variable storing the current state of the text, which is expanded when the page initially loads. Within the function, the code first gets a reference to the text element within the page, using its ID attribute. The remainder of the function must handle expanding and collapsing the element.
Collapse
To collapse the element, JavaScript code can set the display style property. The following code demonstrates, added inside the function, after the line in which a reference to the element is stored in a variable:
if(isShown) {
textElement.style.display="none";
isShown = false;
}
This conditional statement checks the variable to establish whether the text is currently shown or not. If it is, the code sets the element display property to "none" which both hides and collapses the element within the page. Finally, the code toggles the boolean "isShown" variable to false, indicating that the element is now hidden.
Expand
To expand the text, the function can alter the style property of the text element again. The following code demonstrates, added after the "if" statement but still inside the function:
else {
textElement.style.display="block";
isShown = true;
}
The "else" statement only executes when the "if" statement returns a false value, which occurs when the element is currently collapsed. The code first alters the display property to "block" which both shows the text content and expands the element it is contained in. Finally the code resets the boolean variable to true, indicating that the element is currently shown. Each time the user clicks the button the element will toggle between expanded and collapsed.
See also:
Implementing Image Links with JavaScript
Displaying a Substring in JavaScript
Using Scripts in HTML Pages
No comments:
Post a Comment