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
  • 134 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

wanted a tree menu with rounded corners and custom expand/collapse images. was correct that JavaScript can toggle visibility, and raised concerns about using CSS properties — but a couple of clarifications help:

display:none actually removes the element from layout; visibility:hidden hides it but keeps the space. Both properties work in modern IE. For a robust, accessible pattern, toggle a CSS class (and the aria-expanded state) on a semantic control (use a button), then let CSS handle icons, rounded corners and transitions. That keeps markup, style and behavior separate and makes keyboard/screen-reader use predictable.

Example structure and styles (replace icon filenames with your images):

<ul class="tree" role="tree">
  <li class="node">
    <button class="toggle" aria-expanded="false" aria-controls="sub-1">Region</button>
    <ul id="sub-1" class="children" hidden>
      <li>Child item</li>
    </ul>
  </li>
</ul>
.toggle {
  background: url("icon-expand.png") left center no-repeat;
  padding-left: 24px;
  border-radius: 6px;
  border: none;
}
.toggle[aria-expanded="true"] {
  background-image: url("icon-collapse.png");
}
.children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
}
.children.open { max-height: 500px; /* large enough to show content */ }

Minimal JS to flip state and class (keeps display logic out of CSS rules):

document.querySelectorAll(".toggle").forEach(function(btn){
  btn.addEventListener("click", function(){
    var id = btn.getAttribute("aria-controls");
    var panel = document.getElementById(id);
    var expanded = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", String(!expanded));
    panel.hidden = expanded;
    panel.classList.toggle("open", !expanded);
  });
});

Troubleshooting tips: use CSS sprites or inline SVG to reduce HTTP requests for icons; avoid animating height:auto (use max-height or transforms instead); ensure keyboard focus styles and update aria-expanded so assistive tech works. For a CSS-only fallback, consider the native <details> element (see MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and read MDN on aria-expanded for accessible state management (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).

Recommended Answers

All 2 Replies

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.