Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

tree structure like explorer

Hi all,

I have a list of values that are to be displayed in a tree structure. I am using front page for developing the web page.
For the time being the purpose is served with bullet points. I have to replace the bullet points with + to collapse and - for expand. Thats something similar to what we see in the windows explorer left side frame.

I am using HTML, Java script.

Please give me suggestions
Thanks in advance

  • 2
1 Solution
I think that a way is using some empty tags, so then (when the user press +) you can fill with the information.
Here is a simple example of what I mean:
<script language="JavaScript">
var state1 = 0, state2 = 0;
function A()
if (state1 == 0)
     {document.all.image1.src = "imageless.gif";
      document.all.cd.insertAdjacentHTML("BeforeEnd", "First C: folder<br>Second  C: folder<br>Third  C: folder");
      state1 = 1
     {document.all.image1.src = "imagemore.gif";
      document.all.cd.innerText = "";
      state1 = 0

function B()
if (state2 == 0)
     {document.all.image2.src = "imageless.gif";
      document.all.ad.insertAdjacentHTML("BeforeEnd", "First A: folder<br>Second  A: folder<br>Third  A: folder");
      state2 = 1
     {document.all.image2.src = "imagemore.gif";
      document.all.ad.innerText = "";
      state2 = 0

<img id="image1" src="imagemore.gif" onClick="A();">C:\<br>
<div id="cd"></div>
<img id="image2" src="imagemore.gif" onClick="B();">A:\<br>
<div id="ad"></div>
I have only set 2 variables outside of the functions, so I can modify them from the function but won't change every time that I run the script.
Use the + and - images as imagemore.gif and imageless.gif (or what name that you want, but remeber to change it also on the image tags).
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.

If the user does not know how to close the question, the options are here:


Thank you for the points, and glad to help.

Featured Post

Transaction-level recovery for Oracle database

Veeam Explore for Oracle delivers low RTOs and RPOs with agentless transaction log backup and transaction-level recovery of Oracle databases. You can restore the database to a precise point in time, even to a specific transaction.

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