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>
To create this Twitter like textarea box and character count, we are going to use php and jquery. This is a three step process. You will need to download the jquery library. Once you have that, we are going to load the jquery library into our php script, and make sure that our DOCTYPE is in-place. You can call this file whatever you like - something like mytwitterbox.php.
First, open up the new php file you just created, and add an html header. Besure 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>
Textarea and Character Count
</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> // the javscript file may look different for newer versions of jquery.
</head>
<body>
Second, within the body we will create a textarea form and character count. Notice the "maxlength" in the form, this is what the jquery ajax request will look for. So this must be in place.
<form method="POST" action=" mytwitterbox.php">
<div style="width: 400px;padding-top: 7px;">
<textarea style="width: 438px;height: 50px;" id="status" name="status" maxlength="140"></textarea>
<p></p>
<input type="submit" name="submit" value="Update" />
<span class="charsRemaining" style="padding-left: 10px;font-size: 20px;padding-top: 5px;color: #ccc;">140</span>
</div>
</form>
Third, we will create the jquery ajax request that checks for a textarea form, and it's "maxlength". If found then every time a character is added to that form, it checks against the number of characters to the "maxlength" of your form. It then subtracts, and displays the current count in the span above with the class name of "charsRemaining".
<script type="text/javascript">
$(document).ready(function(){
$('textarea[maxlength]').keyup(function(){
var max = parseInt($(this).attr('maxlength'));
if($(this).val().length > max){
$(this).val($(this).val().substr(0, $(this).attr('maxlength')));
}
$(this).parent().find('.charsRemaining').html('' + (max - $(this).val().length) + '');
});
});
</script>
</body>
</html>
That's it. Hopefully this works for you. I did not take styling into play in this example so it may not look very pretty, but it'll work very well.