Help Making Javascript Display Div on Click

[Clarkie]

Hey there,

I have been working on a site as a hobby and I decided I wanted a dropdown menu. The menu is like below:

[forums.penhacks.net ]

Basically the top div has the Options button in a div inside which is floated to the right. When Options is clicked I'd like the menu below to appear.

I've heard this can be done in multiple ways so if possible I'd like the div to appear to slide out from below the top div.

It is for a MyBB theme which I plan to release free so I'll credit whoever helps when I release the theme. It can be seen here: [jacknathanclarke.info...]

I hope this makes sense and thanks for your time.

Clarkie

PS. I'm new here so hey. :)

[Clarkie]

My friend gave me this code:

<a href="#" onclick="document.getElementById('myDiv').style.display='visible'>Click to show the div</a> 

<script type='text/javascript'> 
function atload() {
}
window.onload=atload;
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('myDiv').style.visibility = 'hidden'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.myDiv.visibility = 'hidden'; 
} 
else { // IE 4 
document.all.myDiv.style.visibility = 'hidden'; 
} 
} 
</script>

Not sure if it'd work?

[Fotiman]

That code is terribly obsolete. The browsers in your "else" cases (Netscape 4 and IE4) have not been in use for many years.

If you want it to appear to "slide out", then you're going to need more than simply setting the display or visibility property.

jQuery can do this with the slideDown [api.jquery.com] method. Here's how I would do it:

<div>
  <a href="#myDiv" id="options">Click to show the div</a>
</div>
<div id="myDiv">My Div</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
  // First hide the div
  $('#myDiv').hide();
  $('#options').click(function (event) {
    event.preventDefault();
    if ($('#myDiv').is(':hidden')) {
      $('#myDiv).slideDown();
    }
  }
});
</script>

[Clarkie]

Thanks for the reply. This is what I entered:
CSS

.panel {
background: #557260 url(images/oceanic/welcomebg.png) repeat-x;
width: 920px;
height: 24px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
float: left;
padding-top: 6px;
font-size: 11px;
}

.panel_right {
margin: 0;
text-align: right;
float: right;
}

#optionpanel {
background: #557260;
width: 920px;
height: 25px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
text-align: left;
font-size: 11px;
}

#optionpanel_right {
margin: 0;
text-align: right;
float: right;
}

Main Content

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 // First hide the div
 $('#optionpanel').hide();
 $('#menudrop').click(function (event) {
  event.preventDefault();
  if ($('#optionpanel').is(':hidden')) {
   $('#optionpanel').slideDown();
  }
 }
});
</script>

<div class="panel">{$lang->welcome_back}<div class="panel_right"><strong><a href="#options" id="menudrop">Options</a></strong> &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></div></div>
<br clear="all"/><div id="optionpanel"><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span> &mdash; <a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> &mdash; <a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a> &mdash; <a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}
<div id="optionpanel_right"><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>{$modcplink}{$admincplink}</div></div>

Unfortunately it doesn't hide it. When you click the link it just jumps down the page.