Make Div Expand Seamlessly

Question

I use Javascript to expand the div, but when the content expands, it is very cool and, at best, very inattentive. I was wondering if there is a way to make this div expand slower and have more visual extension than BLAM. Now I am done.

<script language="javascript"> function toggle_profile() { var ele = document.getElementById("toggleProfile"); var text = document.getElementById("displayProfile"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "View Profile"; } else { ele.style.display = "block"; text.innerHTML = "Hide Profile"; } } </script> <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> <br /> <div id="toggleProfile" style="display: none"> 

Answer 1

In fact, it makes no sense to remake the wheel. You can do this quite easily with jQuery slidetoggle. Here is the page: http://api.jquery.com/slideToggle/

Answer 2

The trick is to add and remove classes in Javascript ... And add a CSS3 transition as follows:

 div { -webkit-transition: height .25s ease; -moz-transition: height .25s ease; transition: height .25s ease; } 

A transition is applied, which you can control the speed of all your sections. Of course, you can choose which DOM elements to apply to yourself.

And then the two jquery functions that I used will be

 $("#object").addClass("removeThis"); //hide $("#object").removeClass("removeThis"); //show 

But as indicated, you cannot use jQuery! So here!

 document.getElementById("object").className = ""; document.getElementById("object").className = "removeThis"; 

Where "#object" is the object you are aiming at and ".removeThis" is the class that you add and remove from the class attribute in the dom tag. This is how it looks in css.

 #object { height: 200px; /* ignoring other CSS */ } .removeThis { height: 0; } 

Assuming you want it to slide up and down. Another trick is to use opacity or display: none and display: block. But play. Hope this helps!

Edit since 2012: Since you are using JavaScript, you are asking for the work to be done in the main thread, you can use the composer stream, animating the transformation instead. That is, if you can understand how to get away from animating height style properties.

Answer 3

I think the best trick is to use the CSS overflow:hidden property in the section. This will hide the content coming out of the height or width of the div. Then you can easily increase and decrease the height of the division with a smooth transition CSS.

You can read the tutorial here.