Toggle HTML with Javascript

In this tutorial, we are going to see how to create toggle effect using Javascript without jQuery. In the previous tutorial, we have seen about toggling HTML using jQuery. This example code is preferable when the user don’t want to load the entire jQuery library for toggling HTML.

View Demo

In this example we are using the same HTML we have seen in the previous tutorial, Toggle HTML with jQuery.

Javascript Code for HTML Toggling

This code is for toggling HTML by changing the display of the selectors.

function toggleText() {
     if(document.getElementById("more-option").style.display == 'none') {
		document.getElementById("more-option").style.display = '';
		document.getElementById("more").style.display = 'none';
		document.getElementById("less").style.display = '';
	 } else {
		document.getElementById("more-option").style.display = 'none';
		document.getElementById("more").style.display = '';
		document.getElementById("less").style.display = 'none';
	 }
}

View DemoDownload

This jQuery code tutorial was published on March 18, 2015.

↑ Back to Top