Toggle HTML with Javascript

In this tutorial we are going to see how to create toggle effect using Javascript without jQuery. In 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 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