Toggle HTML with Javascript
by Vincy. Last modified on July 12th, 2022.
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.
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';
}
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.