With just a little Javascript knowledge you can create a sliding div effect that is commonly seen on the web.
In this video tutorial, Mark will show you how to create a sliding div within the browser. The sliding div reveals it’s content as the div opens and completely disappears once the div is closed. The full code appears below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>Sliding Div: Show Hide</title> <style type="text/css"> #myDiv { width: 400px; background-color: #3451da; padding: 5px; color: white; font-size: .75em; font-family: arial; border: 1px dashed black; } </style> <script language="javascript" type="text/javascript"> var heightOfDiv; var t; var targetHeight; function hide() { heightOfDiv = document.getElementById("myDiv").offsetHeight; //alert(heightOfDiv); var freq = 1000/heightOfDiv; t=setInterval("retract()", freq); } function retract() { if(heightOfDiv>0) { heightOfDiv = heightOfDiv-1; document.getElementById("myDiv").style.height = heightOfDiv + "px"; } else { document.getElementById("myDiv").style.display = "none"; clearInterval(t); } } </script> </head> <body> <div id="myDiv"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie, metus sed condimentum molestie, est enim molestie magna, et ullamcorper erat quam sit amet sapien. Nulla eu lorem elit, a convallis velit. Nunc eget nisi ligula. Nunc tellus lacus, bibendum sit amet lacinia ac, molestie sit amet enim. Donec convallis interdum ipsum, ac mattis ipsum porttitor ac. Ut sed erat vitae nisi cursus sodales. Nulla nisi est, fermentum in malesuada eget, aliquet id velit. Fusce ac sapien eu metus fringilla commodo. Nullam porta leo vel nisi rhoncus ac tincidunt enim consequat. Praesent posuere sodales tortor eu placerat. Quisque pulvinar nibh ut ante gravida ornare. Donec euismod lacus vel nibh scelerisque vel sollicitudin mauris feugiat. Etiam sollicitudin lacus neque. Sed mattis accumsan ipsum, nec sollicitudin justo lobortis sed.estie sit amet enim. Donec convallis interdum ipsum, ac mattis ipsum porttitor ac. Ut sed erat vitae nisi cursus sodales. Nulla nisi est, fermentum in malesuada eget, aliquet id velit. Fusce ac sapien eu metus fringilla commodo. Nullam porta leo vel nisi rhoncus ac tincidunt enim consequat. Praesent posuere sodales tortor eu placerat. Quisque pulvinar nibh ut ante gravida ornare. Donec euismod lacus vel nibh scelerisque vel sollicitudin mauris feugiat. Etiam sollicitudin lacus neque. Sed mattis accumsan ipsum, nec sollicitudin justo lobortis sed. </div> <div id="controls"> <input type="button" value="hide" onclick="hide()"/> <input type="button" value="show" onclick="show()"/> </div> </body> </html>
Really good tutorial!
Lots of people ask for help with showing and hiding divs — right now, this tutorial URL isn’t popping on Google. But for using CSS, Javascript and HTML to show and hide divs or sections or boxes, this tutorial is perfect: free video and code. Thanks Mark.