Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
$(function() { $(".tree-parent").prepend("<span class='tree-icon'>▶</span>"); $(".tree-parent .tree-icon").on("click", function() { const $parent = $(this).parent(); const $children = $parent.children(".tree-children"); const open = $children.is(":visible"); $children.slideToggle(150); $(this).text(open ? "▶" : "▼"); $parent.attr("aria-expanded", !open); }); // Keyboard support $(".tree-parent").on("keydown", function(e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); $(this).find(".tree-icon:first").trigger("click"); } }).attr("tabindex","0").attr("role","treeitem"); });
Result
Open