Ads

How-to: Javascript Expandables

There is many different ways to do this, here is one. In this simple tutorial I will be showing you how to expand and collapse content in a div using javascriptand some html!

First off, Put this in the

CODE
<head></head>

of your page.


CODE
<script>
function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>



This javascript code will show the content if user has chosen to, else if the person has not, it does not display.

That's the javascript part of the code.

In the next part of the code would be where your content would be.

If you want your code to start of expanded put:

CODE
<span class="postshown" id="content">
Content Here
</span>


This 'Area' will be shown.

And if you wanted your content to be collapsed then you would put:

CODE
<span class="posthidden" id="content">
Content Here
</span>



This will not be shown.

Thats simple as well. Now when users click this link they would collapse the

CODE
<a href="jexpandcollapse('content')">Collapse Content</a>


This would collapse using the javascript method above.

And now to expand the content use this

CODE
<a href="jexpandcollapse('content')">Expand Content</a>


This would expand using the javascript above.

Sunday May 27, 2007 - 372 reads