Autogenerated Collapsible Directory Tree from a UL

Developer
Alex Raven
Size
3,364 Kb
Views
50,600
  1. Autogenerated Collapsible Directory Tree from a UL Previews
  2. Autogenerated Collapsible Directory Tree from a UL HTML Codes
  3. Autogenerated Collapsible Directory Tree from a UL CSS Codes
  4. Autogenerated Collapsible Directory Tree from a UL JS Codes

How do I make an autogenerated collapsible directory tree from a ul?

Demo for a daily dabble: Autogenerated Collapsible Directory Tree From a Simple List. What is a autogenerated collapsible directory tree from a ul? How do you make a autogenerated collapsible directory tree from a ul? This script and codes were developed by Alex Raven on 07 September 2022, Wednesday.

Autogenerated Collapsible Directory Tree from a UL Previews
IQ Test

Autogenerated Collapsible Directory Tree from a UL - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Autogenerated Collapsible Directory Tree from a UL</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Collapsible Directory List</h2>
<div class="box"> <ul class="directory-list"> <li>assets <ul> <li>css <ul> <li>typography.css</li> <li>layout.css</li> <li>modules.css</li> <li>states.css</li> <li>theme.css</li> </ul> </li> <li>js <ul> <li>custom.js</li> <li>jquery.js</li> </ul> </li> <li>images <ul> <li>logo.svg</li> <li>arrow-sprite.svg</li> <li>social-sprite.svg</li> </ul> </li> <li>functions.php</li> </ul> </li> <li>templates <ul> <li>pages <ul> <li>about.tpl</li> <li>pricing.tpl</li> <li>contact.tpl</li> <li>home.tpl</li> <li>features.tpl</li> </ul> </li> <li>header.tpl</li> <li>menu.tpl</li> <li>footer.tpl</li> </ul> </li> <li>index.php</li> <li>style.css</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Autogenerated Collapsible Directory Tree from a UL - Script Codes CSS Codes

/* Demo page styles
-------------------------------------------------------------- */
body { background: #eee; font-family: "times new roman", serif; line-height: 30px;
}
h2 { color: #aaa; font-size: 30px; line-height: 40px; font-style: italic; font-weight: 200; margin: 40px; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
.box { background: #fff; border-radius: 2px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); margin: 30px 5%; padding: 5%;
}
@media (min-width: 544px) { .box { margin: 40px auto; max-width: 440px; padding: 40px; }
}
/* The list style
-------------------------------------------------------------- */
.directory-list ul { margin-left: 10px; padding-left: 20px; border-left: 1px dashed #ddd;
}
.directory-list li { list-style: none; color: #888; font-size: 17px; font-style: italic; font-weight: normal;
}
.directory-list a { border-bottom: 1px solid transparent; color: #888; text-decoration: none; transition: all 0.2s ease;
}
.directory-list a:hover { border-color: #eee; color: #000;
}
.directory-list .folder,
.directory-list .folder > a { color: #777; font-weight: bold;
}
/* The icons
-------------------------------------------------------------- */
.directory-list li:before { margin-right: 10px; content: ""; height: 20px; vertical-align: middle; width: 20px; background-repeat: no-repeat; display: inline-block; /* file icon by default */ background-image: url("data:image/svg+xml;utf8,"); background-position: center 2px; background-size: 60% auto;
}
.directory-list li.folder:before { /* folder icon if folder class is specified */ background-image: url("data:image/svg+xml;utf8,"); background-position: center top; background-size: 75% auto;
}

Autogenerated Collapsible Directory Tree from a UL - Script Codes JS Codes

// get all folders in our .directory-list	var allFolders = $(".directory-list li > ul");	allFolders.each(function() { // add the folder class to the parent <li> var folderAndName = $(this).parent(); folderAndName.addClass("folder"); // backup this inner <ul> var backupOfThisFolder = $(this); // then delete it $(this).remove(); // add an <a> tag to whats left ie. the folder name folderAndName.wrapInner("<a href='#' />"); // then put the inner <ul> back folderAndName.append(backupOfThisFolder); // now add a slideToggle to the <a> we just added folderAndName.find("a").click(function(e) { $(this).siblings("ul").slideToggle("slow"); e.preventDefault(); });	});
Autogenerated Collapsible Directory Tree from a UL - Script Codes
Autogenerated Collapsible Directory Tree from a UL - Script Codes
Home Page Home
Developer Alex Raven
Username asraven
Uploaded September 07, 2022
Rating 3
Size 3,364 Kb
Views 50,600
Do you need developer help for Autogenerated Collapsible Directory Tree from a UL?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Raven (asraven) Script Codes
Name
AWWWards Inspired Animated Heart Share Icon
Screen Capture an HTML Element and Save as a Downloadable PNG
Wiki TOC Enumeration with CSS Counters
Hover Morphing CSS Line Icons
A Directory Tree List Style
Purely CSS Line Icons
Simple Pulsing Image Hover Effect
CSS3 Content Callouts
Media Queries Test Page
OffScreen Panel With Tabbed Nav
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!