Simple Show/Hide Text using JavaScript

This is a simple tutorial which explains how to show or hide lines in a paragraph using JavaScript. The concept is to split the lines in the paragraph into two sections and show/hide the second section by clicking a hyperlinked text (to create a toggle effect). By default, the first section in the paragraph is set to always visible, and a hyperlink at the end of the line with onclick action to display the second section. Similarly, a hyperlink at the end of the line of the second section with onclick action is displayed after a mouse click event to hide the second section.

Example

This is a simple tutorial which explains how to show or hide lines in a paragraph using JavaScript. <a style='text-decoration: none' id='show_line' href='javascript:void(0)' onclick="document.getElementById('more').style.display = 'inline'; document.getElementById('hide_line').style.display = 'inline'; document.getElementById('show_line').style.display = 'none';">show more</a><span id='more' style='display: none;'>The concept is to split the lines in the paragraph into two sections and show/hide the <i>second section</i> by clicking a hyperlinked text (to create a toggle effect). By default, the <i>first section</i> in the paragraph is set to always visible, and a hyperlink at the end of the line with <kbd>onclick</kbd> action to display the <i>second section</i>. Similarly, a hyperlink at the end of the line of the <i>second section</i> with <kbd>onclick</kbd> action is displayed after a mouse click event to hide the <i>second section</i>. </span><a style='text-decoration: none; display: none' id='hide_line' href='javascript:void(0)' onclick="document.getElementById('more').style.display = 'none'; document.getElementById('show_line').style.display = 'inline'; document.getElementById('hide_line').style.display = 'none';">hide less</a>

Demo

This is a simple tutorial which explains how to show or hide lines in a paragraph using JavaScript. show moreThe concept is to split the lines in the paragraph into two sections and show/hide the second section by clicking a hyperlinked text (to create a toggle effect). By default, the first section in the paragraph is set to always visible, and a hyperlink at the end of the line with onclick action to display the second section. Similarly, a hyperlink at the end of the line of the second section with onclick action is displayed after a mouse click event to hide the second section. hide less