Member Avatar for umamahesh2020

Please any one can help to Expand and Collapse of menu with round corner with "expand image" and "collapse Image".

i have attaching a link for reference http://www.sothink.com/product/treemenu/samples/statecode/statecode.php


In this in place of '+' icon replace as "expand image" as well as '-' icon

like tree menu


[IMG]http://javascripttreemenu.com/img/seo-vertical-tree-navigation-17.jpg[/IMG]

Edited by umamahesh2020 because: n/a
  • 3 Contributors
  • 2 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for f_atencia

You can use Javascript to collapse and hide the section (probably stored as DIV) and just add an event handler on the image link.

Something like:

function collapseExpand()
{
  if(document.getElementById("divToShowOrHide").style.display==="none")
  {
    document.getElementById("divToShowOrHide").style.display="block";
  }
  else
  {
    document.getElementById("divToShowOrHide").style.display="none";
  }
}

That's the very basic of the code. I'll let you figure out the rest =o)

Member Avatar for Taywin

Manipulating with 'display' property alone may not achieve what you want because the element area will still be preserved in the display but not visible to the client. In other word, it will still have an empty area for you after it has been display once even though it is now invisible.

If you want to show/hide, use CSS class with 'display' and 'visibility' properties in it. The reason you should use CSS class because using JS to manipulate 'visibility' property does not work in IE. Unless you are expecting your page to be used in other browsers which are not IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.