The Tree component in JTB_MD is a powerful tool for creating hierarchical list structures. It allows you to organize and display information in a tree-shaped format, making it ideal for scenarios like file directories or any hierarchical data representation.

With customizable options, trees provide practical solutions for managing complex data relationships. Whether showcasing organizational hierarchies or categorizing content, they offer a clear and intuitive way to structure information within your web projects.

How to use

To implement a tree in your projects, simply create a <ul> or <ol> element and apply the .jtbTree class to it. This will be your main container for sub-elements.

Once your main container is created, you are free to add items using <li> tags.

Item 1
Item 2
Item 3

                <!-- Example tree -->
<ul class='jtbTree'>Main container
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Nesting

To create nested trees, simply add another tree element within the first-level item.

- Item 1.1
- Item 1.2
- Item 1.3
Item 2
Item 3

                    <!-- Nested tree -->
<ul class='jtbTree'>Main container
    <li>
        <ul class='jtbTree'>Nested container
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Open Form

To have trees expanded at the page load stage, simply apply the .show class to them.

Item 1
Item 2
Item 3

                    <!-- Expanded tree -->
<ul class='jtbTree show'>
    ...
</ul>

Icon Usage

To enhance visual appeal, you have the flexibility to use any content within your tree containers and items. Simply add them as needed, the library does the rest.

- File 1
- File 2
- File 3
File 4
File 5

                    <!-- Additional content -->
<ul class='jtbTree show'><i class='...'></i> Main folder
    <li>
        <ul class='jtbTree show'><i class='...'></i> Sub folder 1
            <li><i class='...'></i> File 1</li>
            <li><i class='...'></i> File 2</li>
            <li><i class='...'></i> File 3</li>
        </ul>
    </li>
    <li><i class='...'></i> File 4</li>
    <li><i class='...'></i> File 5</li>
</ul>

Removing Lines

To create a tree element without lines, apply the .jtbTree-noline class to your .jtbTree element.

- Item 1
- Item 2
- Item 3
Item 4
Item 5

                    <!-- Tree with no lines -->
<ul class='jtbTree jtbTree-noline'>
    ...
</ul>

Disabling Items

To disable an item from expanding, you can add .disabled class into it.

- Item 1
- Item 2
- Item 3
Item 4
Disabled item

                    <!-- Disabled tree -->
<ul class='jtbTree disabled'>
    ...
    <li class='disabled'>Disabled item</li>
</ul>