The JavaScript Source: CSS : Easy Drop Down Container

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 arrow down

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

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.

#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.


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

Body

Paste this code into the BODY section of your HTML document


<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

Comments feed

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.

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

4. From: behzad
not work in firefox
10/31/2008 05:13:47

5. From: Lee (Admin)
10/31/2008 11:08:06

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

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

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

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

4. From: behzadnot work in firefox10/31/2008 05:13:47

5. From: Lee (Admin)10/31/2008 11:08:06

2. From: WHS Student04/18/2007 11:49:43

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

1. From: Elizabeth McElvaney11/30/2006 22:48:41

4. From: behzad
not work in firefox
10/31/2008 05:13:47

5. From: Lee (Admin)
10/31/2008 11:08:06

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

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

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