article

Expanding and contracting HTML using JavaScript

Email
Submitted on: 1/3/2015 8:48:00 PM
By: Super Mario (from psc cd)  
Level: Intermediate
User Rating: By 3 Users
Compatibility:
Views: 1622
 
     Using JavaScript, you can very easily make content expand and contact, like with a folding tree. I'll show you how.

 
				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


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Intermediate category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

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.