Bill Skinner.com – Whatever I feel like talking about.
16Jul/100

How to make a collapsible div using jquery.

So lets get started. I am going to show you a basic way on how to create a collapsible div using the jquery framework, and basic html.

You will need to download the jquery framework. Once you have that, we are going to load the jquery framework into our HTML file, and make sure that our DOCTYPE is in-place. You can call this file whatever you like - maybe something like mycollapsiblediv.html (click for example).

First, open up your new HTML file within your favorite text editor, and add an HTML header. Be sure to include a DOCTYPE, and <HTML> tag as shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
My Collapsible Div
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>

Second, within the body we are going to the create a request using the jquery framework to show the div using the .show function with the id="mycontainer" upon page load. We will then check to see if the collapse text has either been clicked, or not clicked.  If it is clicked then show the div contents using the .show function and change collapse text to Hide, if not then hide the div contents using the .hide function and change the collapse text to Show. You will notice a 600 within the .show and .hide functions, this is the duration speed (in milliseconds) of the function.  You can set this number to whatever you like.  The higher the number, the slower it will be.

<script>
$(document).ready(function(){

$('#mycontainer').show(600, function(){

$('#hideDiv').attr('title', 'Hide');

$('#hideDiv').html('Hide');
})

var hide = false;

$('#hideDiv').click(function(){

if(hide){

hide = false;

$('#hideDiv').attr('title', 'Hide');

$('#hideDiv').html("Hide");

$('#mycontainer').show(600);

} else {

hide = true;

$('#hideDiv').attr('title', 'Show');

$('#hideDiv').html("Show");

$('#mycontainer').hide(600);

}
})
});
</script>

Lastly, within the body we will create a div with an id="mycontainer".  This will be the id that the jquery request will identify to either show or hide its contents. You can put whatever you'd like within this div.  This must be in place.

Since we are showing the div contents upon page load, we have set the div with the id="hideDiv" to Hide.  This div is clickable and will be used to show or hide the content below it.  If we did not show the content during page load then we would set this to Show.

For appearances I made the Hide text look like a link and set the cursor to a pointer so people will know it's clickable.

<div id="hideDiv" title="Hide" style="clear: both;cursor: pointer;color: #3A78B1;text-decoration: underline;" >
Hide
</div>

<div id="mycontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt adipiscing ipsum, et placerat ligula lobortis nec. Proin porta condimentum quam et pellentesque. Ut adipiscing mauris vel ipsum dictum euismod tempus augue porta. Sed eros nisi, vehicula vel semper eget, tempor sed lorem. Pellentesque dolor risus, vestibulum id vehicula in, ultricies at orci. Donec et risus quis sapien imperdiet bibendum. Proin fermentum sollicitudin laoreet. Maecenas magna neque, scelerisque sit amet molestie nec, cursus nec sem. Donec eleifend felis vitae urna mollis ac aliquet risus rhoncus. Quisque tincidunt nulla quis odio congue iaculis. Praesent aliquam, leo quis placerat sagittis, ipsum eros dapibus turpis, sit amet facilisis quam lacus quis dui. Nullam sit amet sagittis enim. Aliquam accumsan tempus mi, eget tempus tellus euismod et. Donec scelerisque adipiscing fringilla. Donec sed lacus sed ante eleifend lacinia.</p>
</div>

</body>
</html>

Tagged as: , , , , , , , , Leave a comment
» «

Post Archives

Post Categories

Advertisements

Most Recent Posts