How can I expand and collapse a <div> using javascript

Joseph_Hill · Oct 6, 2016

I don't want to use jQuery for this purpose just for expanding or collapsing a <div> becuase it will load pretty weight, how can I expand and collapse a <div> using javascript?

tlhIngan · Oct 6, 2016

Hey Joseph,

You can use these codes, just pasting into your HTML file and see how it works.

Code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "Read more";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide";
	}
} 
</script>

HTML:

<a id="displayText" href="javascript:toggle();">Read more</a> 
<div id="toggleText" style="display: none">Are you trying to find a way to hide and show your content? These codes above shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.</div>

It's simple and you don't need to use jQuery, If you want your div look smoothly you should use Jquery.

Hope that helps!

How can I expand and collapse a <div> using javascript

Joseph_Hill

Active member

tlhIngan

Member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud