|
Expanding and contracting HTML using JavaScript
|
Email
|
| Submitted on: |
3/16/2004 1:17:14 AM |
| By: |
Super Mario
|
| Level: |
Intermediate |
| User Rating: |
By 3 Users |
| Compatibility: |
JavaScript |
| Views: |
11607 |
|
|
|
|
|
Using JavaScript, you can very easily make content expand and contact, like with a folding tree. I'll show you how.
|
| |
Terms of Agreement:
By using this article, you agree to the following terms...
- You may use
this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
- You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
- You may link to this article from another website, but ONLY if it is not wrapped in a frame.
- You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.
|
Using JavaScript, you can very easily make content expand and contact, like with
a folding tree. The key is the CSS property "display." I use it below to create
a header that expands/contacts when clicked on:
<script type="text/javascript">
function foldinout(theid){
var theid=document.getElementById(theid)
theid.style.display=(theid.style.display=="block")? "none" : "block"
}
</script>
<div onClick="foldinout('thelinks')"><b>Categories</b></div>
<div id="thelinks" style="display:block">
-Games
-Entertainment
-Movies
</div>
I love this "Switch Menu" script from Dynamic Drive, which makes excellent
use of this idea: http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
|
|
Other 1 submission(s) by this author
|
|
Report Bad Submission
|
Your Vote
|
| |
Other User Comments
|
 3/17/2004 12:45:36 AM:
I'm no JavaScript expert but this looks good to me - it has application in several areas - I'm designing a dynamic form where fields can be added dynamically (or revealed possibly, as this indicates). Good work, thanks.
Rae MacLeman
(If this comment was disrespectful, please report it.)
|
8/4/2004 10:20:55 AM: VeeJay
This is gonna sound corny, but I have been looking for code like this for a while now. I was gonna give up with the expanding style in Mozilla/Netscape, but thanx to you, I can now make it work.
Pity they only have 5 stars. I would've given you 10!!!!!!!!!!
(If this comment was disrespectful, please report it.)
|
Add Your Feedback
Your feedback will be posted below and an email sent to
the author. Please remember that the author was kind enough to
share this with you, so any criticisms must be stated politely, or they
will be deleted. (For feedback not related to this particular article, please
click here instead.)
To post feedback, first please login.
|
