159 lines
5.0 KiB
HTML
159 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<style>
|
|
#hierarchy
|
|
{
|
|
font-family: FontAwesome;
|
|
width: 300px;
|
|
}
|
|
.foldercontainer, .file, .noitems
|
|
{
|
|
display: block;
|
|
padding: 5px 5px 5px 50px;
|
|
}
|
|
.folder
|
|
{
|
|
color: red;
|
|
}
|
|
.file
|
|
{
|
|
color: green;
|
|
}
|
|
.folder, .file
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.noitems
|
|
{
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|
|
.folder:hover,.file:hover
|
|
{
|
|
background: yellow;
|
|
}
|
|
.folder:before, .file:before
|
|
{
|
|
padding-right: 10px;
|
|
}
|
|
/*
|
|
|
|
*/
|
|
</style>
|
|
<body>
|
|
<!-- Tomar herarchi -->
|
|
|
|
<div id="hierarchy">
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder-o" data-isexpanded="true">Folder 1</span>
|
|
<span class="file fa-file-excel-o">File 11</span>
|
|
<span class="file fa-file-code-o">File 12</span>
|
|
<span class="file fa-file-pdf-o">File 13</span>
|
|
<span class="file fa-file-pdf-o">File 13</span>
|
|
<span class="file fa-file-pdf-o">File 13</span>
|
|
<span class="file fa-file-pdf-o">File 13</span>
|
|
<span class="file fa-file-pdf-o">File 13</span>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder-o" data-isexpanded="true">Folder 1-1</span>
|
|
<span class="file fa-file-excel-o">File 1-11</span>
|
|
<span class="file fa-file-code-o">File 1-12</span>
|
|
<span class="file fa-file-pdf-o">File 1-13</span>
|
|
</div>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder">Folder 1-2</span>
|
|
<span class='noitems'>No Items</span>
|
|
</div>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder">Folder 1-3</span>
|
|
<span class='noitems'>No Items</span>
|
|
</div>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder">Folder 1-4</span>
|
|
<span class='noitems'>No Items</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder-o" data-isexpanded="true">Folder 2</span>
|
|
<span class="file fa-file-excel-o">File 21</span>
|
|
<span class="file fa-file-code-o">File 22</span>
|
|
<span class="file fa-file-pdf-o">File 23</span>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder-o" data-isexpanded="true">Folder 2-1</span>
|
|
<span class="file fa-file-excel-o">File 2-11</span>
|
|
<span class="file fa-file-code-o">File 2-12</span>
|
|
<span class="file fa-file-pdf-o">File 2-13</span>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder">Folder 2-1-1</span>
|
|
<span class='noitems'>No Items</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder-o" data-isexpanded="true">Folder 3</span>
|
|
<span class="file fa-file-excel-o">File 31</span>
|
|
<span class="file fa-file-code-o">File 32</span>
|
|
<span class="file fa-file-pdf-o">File 33</span>
|
|
|
|
<div class="foldercontainer">
|
|
<span class="folder fa-folder">Folder 3-1</span>
|
|
<span class='noitems'>No Items</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var hierarchy = document.getElementById("hierarchy");
|
|
hierarchy.addEventListener("click", function(event){
|
|
// Tomar herarchi | Div Con ID | Agregar .addEventListener
|
|
|
|
var elem = event.target;
|
|
|
|
var type = elem.classList.contains("folder") ? "folder" : "file";
|
|
if(type=="file")
|
|
{
|
|
alert("File accessed");
|
|
}
|
|
if(type=="folder")
|
|
{
|
|
|
|
|
|
var isexpanded = elem.dataset.isexpanded=="true";
|
|
if(isexpanded)
|
|
{
|
|
elem.classList.remove("fa-folder-o");
|
|
elem.classList.add("fa-folder");
|
|
}
|
|
else
|
|
{
|
|
elem.classList.remove("fa-folder");
|
|
elem.classList.add("fa-folder-o");
|
|
}
|
|
|
|
|
|
elem.dataset.isexpanded = !isexpanded;
|
|
|
|
var toggleelems = [].slice.call(elem.parentElement.children);
|
|
var classnames = "file,foldercontainer,noitems".split(",");
|
|
|
|
toggleelems.forEach(function(element){
|
|
if(classnames.some(function(val){return element.classList.contains(val);}))
|
|
element.style.display = isexpanded ? "none":"block";
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |