How to make a drop-down text

The location of hidden blocks of text improves the visual perception of the page of the website - it is loaded in the browser, which was developed by the designer, regardless of the posted information. In addition, it is easier for a visitor to find the desired block of information it is not necessary to view the entire array, but only a small "tip of the iceberg".

You will need

• Basic knowledge of languages HTML and JavaScript.

Instruction

1. Use a custom function in JavaScript to make the HTML page to hide and show the desired blocks of text. Common to all function blocks is much easier than adding code to each of them individually. In the header part of the source page place opening and closing script tags, and between them create a blank until the function is called, for example, the swap and one mandatory input parameter id:<script>function swap(id) {}</script>
2. Add two lines of JavaScript code in the function body between the braces. The first line should read the current state of the block of text - enabled its visibility on or off. Such blocks in the document may be several, so each must have its own ID - it was his function receives as its only input parameter id. By this ID it is looking for in the document block, assigning a value to visibility/invisibility (as the display property) sDisplay variable:sDisplay = document.getElementById(id).style.display;
3. The second line should change the display property of the desired block of text on the opposite - to hide, if text is visible and show if hidden. You can do this code:document.getElementById(id).style.display = sDisplay == 'none' ? ": 'none';
4. Place it into a header part and a description of the styles:<style type="text/css">a {cursor: pointer}</style>you will need It to correctly display the mouse pointer when you hover over the incomplete tag reference. By using such links you are organizing in the page toggle visibility/invisibility of text blocks.
5. Place in the text of these links-switches in front of every hidden block and the blocks - at the end of the text - add the same link. Invisible text, enclose within span tags that have style attributes set to invisible. For example:Open a text <a onclick="swap('hiddenTxt')">+++</a> <span id="hiddenTxt" style="display: none">This is hidden text <a onclick="swap('hiddenTxt')">---</a></span>In this sample, click on the link of the three pros will call the above function on onClick event, passing it the identifier block that you want to make visible. And inside is placed a link of three cons with the same functions - clicking on it will hide the text.
6. Create as many text blocks, similar to those described in the previous step, not forgetting to change the IDs in the id attribute of the span tag in a variable and the transmitted function on the onClick event in the two links.