The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: 
DD Drop Down Panel
Description: DD Drop Down Panel lets you tuck away ordinary HTML content on the page and revealed on demand when the user clicks on the protruding tab. The rest of the page's content is pushed down when the hidden content is exposed. It comes with a handful of helpful features, from the use of an arrow image to reflect the current panel state, persistence of the panel state, option to automatically close the panel when a link or certain elements within it is clicked on, to the ability to customize the animation speed (or to disable it entirely). And last by not least, two public methods exist to let you dynamically expand/ contact the panel however and wherever on your page.
This is a quintessential Web 2.0 effect, made Web "any version" thanks to the added practical features!
Demo: Look above!
Directions:
Step 1: Insert the following code in the HEAD section of your page
The above references the following files, which you should download (by default, to the same directory as your page itself):
Step 2: Insert the following sample HTML where you want
the Drop Down Panel to be shown on your page, such as right after the
<BODY> tag as in the demo above.
The panel interface should consist of one main DIV and two children DIVs, one holding the content itself, the other, the toggling tab. More info below.
Set up Information
Inside dddropdownpanel.js, at the very end is the code to initialize one Drop Down Panel instance on the page:
var defaultpanel=new ddpanel({
ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV,
content DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial
reveal amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int
between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements
with CSS class="closepanel" within container is clicked on?
})
It calls the constructor function:
var defaultpanel=new ddpanel({settings})
where "defaultpanel" should be an arbitrary but
unique variable to reference the current Drop Down Panel instance. If you're
defining more than one Drop Down Panel, this variable must be unique in each
case.
The first ids:[] parameter (see above) within the
settings object passed into it must be set to the IDs of the 3 DIVs that
together make up your Drop Down Panel interface. On your page, that HTML should
look like the following:
<div id="mypanel"
class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<p style="padding:10px">
Desired content to be shown here...
Desired content to be shown here...
Desired content to be shown here...
</p>
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>
</div>
As you can see, the interface should consist of a main DIV with two children DIVs added inside it- the panel "content" DIV and "toggle tab" DIV. The first DIV holds the content you wish to be shown, and the second holds the "toggle" tab.
Note: When defining the content to be shown inside the Drop Down
Panel, try and add explicit width/height attributes to images and
other embedded elements that may affect the height of the content when they are
done loading.
Toggling a Drop Down Panel dynamically with togglepanel(dir)
and togglepanelplus(dir)
Apart from toggling the state of the Drop Down Panel by clicking on its
protruding tab, you can also dynamically expand, contract, or toggle between the
two on demand by calling one of the two methods togglepanel(dir)
and togglepanelplus(dir). The difference between the two is merely
that the later animates the action into view while the former doesn't. Given the
below Drop Down Panel instance:
<script type="text/javascript">
var testpanel=new ddpanel({
ids: ["mypanel2", "mypanelcontent2", "mypaneltab2"], // id of main panel DIV,
content DIV, and tab DIV
stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal
amount in pixels (ie: 5px)
animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int
between 1-20. Smaller=faster.
pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
closepanelonclick: {enabled: true} // close panel when links or elements with
CSS class="closepanel" within container is clicked on?
})
</script>
- Toggle Test Panel
- Show/ Hide Test Panel
- Toggle Test Panel (w/ animation)
- Show/ Hide (w/ animation)
| Method | Description |
|---|---|
panelinstance.togglepanel([dir]) |
Toggles the state of the Drop Down Panel (so if it's
expanded, contracts it, and vice versa), or, if an optional "dir"
parameter is defined, either explicitly expands or contracts the panel.Parameter:
Example: <a
href="javascript:panelinstance.togglepanel()">Toggle Panel</a> |
|
Method |
Description |
panelinstance.togglepanelplus([dir]) |
Toggles the state of the Drop Down Panel using a
"reveal" animation, (so if it's expanded, contracts it, and vice versa),
or, if an optional "dir" parameter is defined, either
explicitly expands or contracts the panel.Parameter:
Example: <a
href="javascript:panelinstance.togglepanelplus()">Toggle Panel</a> |
Toggle away!