One Link: Drop Down, Pull Up

**jooles** · Dec 27, 2006, 14:52

I'm messing around with javascript and one of the most common uses for javascript is to make a drop down menu like the one found at the top of my js test page:

http://www.mndaily.com/ddtest2/test.php#

here is my code for this particular drop down thing

Code:

<head>
<script type="text/javascript">

function down(){
document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=up()>compress</u> <p><li>asdf<li>fsdajlealasdf<li>i like to eat subway<li>pita pit is good but expensive</p>"
}

function up(){
document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=down()>expand</u>"
}

</script>
</head>

<h2>// TESTS A DROP DOWN PULL UP MENU</h2>
<div id="outer"><u href=# style="color: blue; cursor:pointer;" onclick=down()>expand</u> </div>

Is there a cleaner or better way to do this?

**ALL** · Dec 27, 2006, 15:37

what i like to do is to make a div that is position:absolute and visibility:hidden then put all the info you need into that div. then set an id to that div, and have javascript copy all the innerHTML from it to the div that you want to display the info.

for example i recently created this page which does exactly what i am talking about:

http://www.therealestategroupinc.com/idx

(look at the source)

**Mirek Komárek** · Dec 31, 2006, 10:03

Here is a lot of way to do this, I can just recomend you rather change classname and keep content readable without javascript. You can try

<style type="text/css">
.expand .e{display:block}
.expand .c{display:none}
.compress .c{display:block}
.compress .e{display:none}
</style>
<script type="text/javascript">
function switcher(){
what=document.getElementById('outer')
what.onclick=function(){
this.className=this.className=='expand'?'compress':'expand';
}
}
if(document.childNodes){window.onload=switcher}
</script>
<h2>// TESTS A DROP DOWN PULL UP MENU</h2>
<div id="outer" class="compress">
<div class="e">
<p>expand</p>
</div>
<div class="c">
<p>compress</p>
<ul>
<li>asdf</li>
<li>fsdajlealasdf</li>
<li>i like to eat subway</li>
<li>pita pit is good but expensive</li>
</ul>
</div>
</div>

And style it as you want, this way it is all separated e.g. it the same as to use this

<div onclick="this.className=this.className=='expand'?'compress':'expand';" class="compress">
just less obtrusive

User Tag List

Thread: One Link: Drop Down, Pull Up

Thread Tools

Display

One Link: Drop Down, Pull Up

Bookmarks

Bookmarks

Posting Permissions