Menu
I am currently working on a project and I want to create a HTML help page to provide my users with help and advice on how to use the app.
What I want to achieve is a tree layout so along the left hand side it has all the titles with a plus symbol next to it. Then when the user clicks on the plus button or on the text it expands with related content to that section. If the user then clicks it again, then all of the items that were shown are now re-hidden.
I haven't been able to find any decent tutorials on how I can do this.
Thanks for any help you can provide.
303
I took a few moments to build up a quick tree system as you described. Fun little exercise. Copy and paste, open in your browser (I'm using FireFox). Change the +/- symbols in the DIV tags to images if you like. Adjust the CSS margins and paddings to make it all fit seamlessly. Hope this helps.
Good Luck.
<html>
<head>
<style type="text/css">
div#tree ul { margin:0 0 0 20px; padding:0; list-style-type:none; }
div#tree ul { display:none; }
div#tree li>div { display:inline; margin-right:5px; cursor:pointer; }
div#tree label:hover { text-decoration:underline; cursor:pointer; }
div#tree>ul { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
//Set plus sign for all sub menus
$('li:has("ul")>div').html('+');
//Handle plus/minus tree expansion
$('li>div').on('click', function (e) {
if($(this).parent('li').hasClass('selected')) {
$(this).siblings('ul').slideUp();
$(this).parent('li').removeClass('selected');
$(this).html('+');
} else {
$(this).siblings('ul').slideDown();
$(this).parent('li').addClass('selected');
$(this).html('−')
}
})
//Handle tree item link stored as LI data attribute
$('li>label').on('click', function (e) {
//This is your URL, URI, Link, Location, etc
alert($(this).parent('li').attr('data-location'))
})
});
</script>
</head>
<body>
<div id="tree">
<ul>
<li data-location=""><div>⌊</div><label>First Level Item1</label></li>
<li data-location=""><div>⌊</div><label>First Level Item2</label></li>
<li data-location=""><div>⌊</div><label>First Level Item3</label></li>
<li data-location=""><div>⌊</div><label>First Level Item4</label></li>
<li data-location=""><div>⌊</div><label>First Level Item5</label>
<ul>
<li data-location=""><div>⌊</div><label>Second Level Item1</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item2</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item3</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item4</label></li>
<li data-location=""><div>⌊</div><label>Second Level Item5</label>
<ul>
<li data-location=""><div>⌊</div><label>Third Level Item1</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item2</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item3</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item4</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item5</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item6</label></li>
<li data-location=""><div>⌊</div><label>Third Level Item7</label></li>
</ul>
</li>
<li data-location=""><div>⌊</div><label>Second Level Item6</label></li>
</ul>
</li>
<li data-location=""><div>⌊</div><label>First Level Item6</label></li>
<li data-location=""><div>⌊</div><label>First Level Item7</label></li>
<li data-location=""><div>⌊</div><label>First Level Item8</label></li>
<li data-location=""><div>⌊</div><label>First Level Item9</label></li>
<li data-location=""><div>⌊</div><label>First Level Item10</label></li>
<li data-location=""><div>⌊</div><label>First Level Item11</label></li>
</ul>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
