Placing hidden blocks of text improves the visual perception of a website page - it loads into the browser exactly the way the designer designed it, regardless of the amount of information posted. In addition, it is more convenient for the visitor - in search of the necessary block of information, he does not have to look through the entire array, but only small "tips of the icebergs".
It is necessary
Basic knowledge of HTML and JavaScript
Instructions
Step 1
Use a custom JavaScript function to hide and display the desired blocks of text in an HTML page. A common function for all blocks is much more convenient than adding code to each of them separately. Place the opening and closing script tags in the header part of the page source code, and between them create an empty function with a name, for example, swap and one required input parameter id: function swap (id) {}
Step 2
Add two lines of JavaScript code to the body of the function, between the curly braces. The first line should read the current state of the block of text - whether its visibility is on or off. There can be several such blocks in a document, so each must have its own identifier - it is his function that receives id as the only input parameter. Using this identifier, it searches for the necessary block in the document, assigning the visibility / invisibility value (the state of the display property) to the sDisplay variable: sDisplay = document.getElementById (id).style.display;
Step 3
The second line should change the display property of the desired block of text to the opposite - hide if the text is visible, and show if it is hidden. This can be done with the following code: document.getElementById (id).style.display = sDisplay == 'none'? '': 'none';
Step 4
Add the following stylesheet to the header section: a {cursor: pointer} You will need this to display the mouse pointer correctly when you hover over an incomplete link tag. With the help of such links, you organize in the page toggle the visibility / invisibility of text blocks.
Step 5
Place these toggle links in the text before each hidden block, and in the blocks at the end of the text, add a similar link. Enclose invisible text in span tags that have invisibility set in their style attributes. For example: Expand the text +++ This is hidden text --- In this example, clicking on a three plus link will call the above function on the onClick event, passing it the ID of the block to be made visible. And inside the block there is a link of three minuses with the same functions - clicking on it will hide the text.
Step 6
Create the required number of text blocks, similar to the one described in the previous step, remembering to change the IDs in the id attribute of the span tag and in the variable passed to the function by the onClick event in the two links.
