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

Joseph_Hill

Active member
Registered
Joined
Jan 18, 2013
Messages
73
Points
8
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

Member
Registered
Joined
Jul 12, 2016
Messages
49
Points
8
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!
 
Older Threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top