• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 586
  • Last Modified:

create a folding menu

I'd like to with javascript and css create a folding menu type deal.

The best way to describe what I want is if you've ever seen gmail or like facebook or something when you click on the little bar it'll expand/compress the message but leave the bar.  That is what I'm looking to do.  I'd imagine I could just create a div and call some javascript function onclick that does what I want but I'm unsure of how to do it or how complex it would be.  Any help would be appreciated.
0
ICPooreman
Asked:
ICPooreman
  • 2
1 Solution
 
basicinstinctCommented:
the alternative to creating one is to download one: http://extjs.com/deploy/dev/examples/menu/menus.html

Creating one yourself can be a significant undertaking, quite a lot of code due to all of the submenus and subsub menus.  Then you've got to worry about positioning in multiple browsers and many other issues like setting and canceling timeouts on the menus...
0
 
ICPooremanAuthor Commented:
hmm I think I phrased my question wrong... I'm not looking for a menu like that...


I'm looking for something in like say a forum type deal such as this.  Imagine on your response you could click the bar that says "Expert Comment" above it and it would basically remove the white text beneath it with what your response just was but leave the bar.  And when you clicked again it would redisplay the text.
0
 
ZvonkoSystems architectCommented:
As easy as this:


<html>
<head>
<title>Zvonko &#42;</title>
<style>
div.hdr {
  background-color: silver;
  font-weight: bold;
  border: dotted 1px blue;
}
div.hdr div {
  background-color: cornflowerblue;
  font-weight: normal;
  display: none;
}
</style>
<script>
function toggle(theDiv){
  var subDiv = theDiv.childNodes[1];
  if(subDiv.style.display=="block"){
    subDiv.style.display="none";
  } else {
    subDiv.style.display="block";
  }
}
</script>
</head>
<body>
<div class="hdr" onClick="toggle(this)">Header1
<div>
Some content.<br>
Some content.<br>
Some content.<br>
Some content.<br>
Some content.<br>
Some content.<br>
</div>
</div>
<div class="hdr" onClick="toggle(this)">Header2
<div>
Some more content.<br>
Some more content.<br>
Some more content.<br>
Some more content.<br>
</div>
</div>
</body>
</html>



0
 
ICPooremanAuthor Commented:
Awesome thank you
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now