IT internet.com/IT internet.com/CIO internet.com/Security internet.com/Networking internet.com/Storage bITa Planet CIO Update Database Journal Datamation Enterprise IT Planet Enterprise Networking Planet Enterprise Storage Forum eSecurity Planet Hardware Central Intranet Journal ISP Planet ITSMwatch IT Channel Planet Linux Planet Open Networks Today ServerWatch VoIP Planet WebVideoUniverse Wi-Fi Planet WinDrivers.com Network Map Developer internet.com/Developer 15 Seconds 4GuysFromRolla.com ASP101 CodeGuru Developer.com DevX FlashKit.com Gamelan JARS JavaScript.com JavaScriptSource PHPBuilder.com ScriptSearch VB Forums VB Wire WebDeveloper.com Webreference Network Map News Internetnews.com Linux Today Network Map Small Business Ecommerce Guide Refer-It SmallBusinessComputing Webopedia WinPlanet Network Map Personal Tech BlackBerryToday iPhoneGuide Jumbo Megapixel.net Palm Boulevard PDAStreet PocketPCWire SharkyExtreme Smart Phone Today The List: ASPs The List: Broadband The List: ISPs The List: WebHosts The List: WebDesigners Wi-FiHotSpotList WindowsMobileToday Network Map Events JupiterEvents internet.com/webcasts Jobs Partners Solutions eBooks Video Shop Login Manage My Profile Register Why Join?

Home New Scripts Tutorials Ajax Tutorials Ajax Buttons Cookies CSS Forms Games Generators Image Effects Math Related Miscellaneous Navigation Page-Details Pass. Prot. Snippets Text Effects Time & Date User-Details JS Core Reference Shopping Web Video Universe Script Count:  2,614

General

Click on the arrow to reveal/hide contents. Can be used for a drop down menu or to hide/reveal content on a Web page.

  Put your heading here  

• Lorem ipsum dolor.
• Ut wisi enim ad.
• Vel illum dolore.
• luptatum zzril.

Notes

• Created by: Jeff Manning
• Web Site:
• Posted: July 15, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: easyDropDownContainer.js

Select code
var doit = true function showm(ob,pict) { if(doit) { document.getElementById(ob).style.height = '125' document.getElementById(pict).src = 'arrowl.gif' doit = false } else { document.getElementById(ob).style.height = '20' document.getElementById(pict).src = 'arrowd.gif' doit = true } }

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

Select code
#newspanel { width:30%; height:20px; background:#f0f0f0; overflow:hidden; } .mborder { border:1px #404040 double; border-top:1px #c0c0c0 double; border-right:1px #c0c0c0 solid; background:#f0f0f0; }

Head

Paste this code into the HEAD section of your HTML document.

Select code
<script type="text/javascript" src="easyDropDownContainer.js"></script>

Body

Paste this code into the BODY section of your HTML document

Select code
<div id="newspanel" class="mborder"> Put your heading here   <img src="arrowd.gif" alt="arrow down" title="click to view" onclick="showm('newspanel','newsst')" id="newsst"> <ul style="list-style-type:none;"> <li>Lorem ipsum dolor.</li> <li>Ut wisi enim ad.</li> <li>Vel illum dolore.</li> <li>luptatum zzril.</li> </ul> </div>

Other

Download the images using the URL below:

• Download the images here

User Comments

Add a comment, suggestion, or correction

[For questions about usage, consult the Notes tab above or visit the JavaScript forum]

Your name:    
Your E-mail:   
Your URL:       
[optional field]
Your subject: 
[optional field]
Your comment:

CAPTCHA Verification Please enter the code displayed to the right in the box below:

Hear it!

   

Comments feed

2. From: WHS Student
04/18/2007 11:49:43

how can i get this to allow me to do multiple drop down containers? now i have multiple boxes, but if i click any of the arrows it only will expand the first... i am VERY new at this java script, but i do have some deadlines i need to meet...

---

3. From: Lee (Admin)
05/25/2007 11:44:21

You need to submit your question to the JavaScript Forum.

---

1. From: Elizabeth McElvaney
11/30/2006 22:48:41

I just wanted to say this is the first javascript that I have come across that was easy to understand how and where to load. I love the tab style. Wish they were all this easy. Wish I could get the tab scripts to work for me. Just keep praying ;-)

Thank you, Thank you, Thank you.

EHM

---

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.