How to create a sub folder on Page?

Question

I dont know how to approach this. I would like to be able to do the following: I have a icon for a folder that links to another page. When the user clicks on the icon, instead of going to the page, a subfolder(s) appears below the folder icon and when the user clicks on one of these folders, then it directs the user to the page.

Below is what I did orignally:

<h4>
  <a href="CalMediConnect_DMgmt.cfm">
    <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
    &nbsp;Disease Management
  </a>
</h4> 
<br /><br />

UPDATE

I have tried the following and it appears to not be working:

The following is the script:

var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++) {
  tree[i].addEventListener('click', function(e) {
    var parent = e.target.parentElement;
    var classList = parent.classList;
    if(classList.contains("open")) {
      classList.remove('open');
      var opensubs = parent.querySelectorAll(':scope .open');
      for(var i = 0; i < opensubs.length; i++) {
        opensubs[i].classList.remove('open');
      }
    } else {
      classList.add('open');
    }
  });
}

The following is the CSS:

ul.tree li {
  list-style-type: none;
  position: relative;
}

ul.tree li ul {
  display: none;
}

ul.tree li.open > ul {
  display: block;
}

ul.tree li a {
  color: #4284B0;
  text-decoration: none;
}

ul.tree li a:before {
  height: 1em;
  padding: .1em;
  font-size: .8em;
  display: block;
  position: absolute;
  left: -1.3em;
  top: .2em;
}
.margin-left {
  margin-left: -15px;
}

And the HTML:

<ul class="tree margin-left">
  <li>
    <h4>
      <a href="#">
        <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
        &nbsp;Disease Management
      </a>
    </h4>
    <ul>
      <li>
        <h5>
          <a href="CalMediConnect_DMgmt.cfm">
            <img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left">
            &nbsp;Disease Management
          </a>
        </h5>
      </li>
    </ul>
  </li> 
</ul>

Any help would be appreciated.

Possible duplicate of [How to create a collapsing tree table in html/css/js?](http://stackoverflow.com/questions/5636375/how-to-create-a-collapsing-tree-table-in-html-css-js) — zero298, Jul 25 '16 at 22:57

Kenneth Stoddard · Accepted Answer · 2016-07-28T02:08:40.690

1

Here is a very basic example built with jQuery...

https://jsfiddle.net/kennethcss/8b4e6o42/

$('.folder').on('click', function(e) {
  var folder = $(this).find('.sub-folder');

  if (e.target !== this) return;

  if(folder.hasClass('hidden')) {
    folder.removeClass('hidden');
  } else {
    folder.addClass('hidden');
  }
});

.folder {
  cursor: pointer;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<ul class="container">
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
  <li class="folder">Primary
    <ul class="sub-folder hidden">
      <li>Secondary</li>
      <li>Secondary</li>
      <li>Secondary</li>
    </ul>
  </li>
</ul>

Of course, you can style however you'd like; this example merely demonstrates how you might structure your HTML, CSS and JS to create a simple, folder like structure.

Gist

https://gist.github.com/kennethcss/8db1dc3326917c77846e84d263beb67d

edited Jul 28 '16 at 02:08

answered Jul 26 '16 at 01:40

Kenneth Stoddard

1,409
11
13

I have tried your way as well and followed your steps and logic and it doesn't work on my end. What I mean does not work is when I click on the folder, it will not expand. Not sure what I am doing wrong – Roberto Flores Jul 26 '16 at 17:03
Do you see any console errors in your browser? https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui?hl=en – Kenneth Stoddard Jul 26 '16 at 17:05
Yes I do. Says the dollar sign is not being recognized – Roberto Flores Jul 26 '16 at 17:05
If you are developing locally it could be any number of issues. As you can see from the Fiddle this is a working example so my recommendation is to ensure that your environment is properly setup, if you are using this example line for line, make sure you are pulling in jQuery, and last, be wary of copy and paste, as often times it is easy to omit important items. – Kenneth Stoddard Jul 26 '16 at 17:11
`Yes I do. Says the dollar sign is not being recognized`...in that case, you probably need to pull in jQuery. – Kenneth Stoddard Jul 26 '16 at 17:13
Add this line to your HTML document somewhere but before your default script `` – Kenneth Stoddard Jul 26 '16 at 17:18
I have tried that as well and it didnt work. The error is gone but it will not drop down – Roberto Flores Jul 26 '16 at 17:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118343/discussion-between-kenneth-stoddard-and-roberto-flores). – Kenneth Stoddard Jul 26 '16 at 17:29
I am not allowed to enter. Says prohibited, weird – Roberto Flores Jul 26 '16 at 17:33
Okay well thank you for your help. I will try and see what I didwrong – Roberto Flores Jul 26 '16 at 17:58
I dont see why it works on your end but not when I implement the same code – Roberto Flores Jul 26 '16 at 18:10
@RobertoFlores I have added a **Gist** to the answer which is a self contained HTML document, I have validated it and there are no issues. You should be able to download it and open it up in your browser with no problems. – Kenneth Stoddard Jul 28 '16 at 02:10
@RobertoFlores Did you find a solution? – Kenneth Stoddard Aug 04 '16 at 02:30
Yes I did the answer provided above. Was the solution, I just had syntax issues – Roberto Flores Aug 04 '16 at 17:04

How to create a sub folder on Page?

1 Answers1