Getting Started

Layout

Components

Plugins

Design

Form

CSS Helper

JS Helper

Tools

Tree

A tree is a way for hierarchically arranging and structuring content.

Events

Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours

HTML |

	<div class="null-tree-container" >
	
		<ul class="null-tree">
						
					<span class="null-tree-main-title null-font-size-18 null-font-weight-bold">
						Events
					</span><!--End null-tree-main-title-->
	
					<ul>
	
						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span><span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span><span>12-12-2023</span></li>
								<li><span>Event End Date: </span><span>12-13-2023</span></li>
								<li><span>Event Location: </span><span>USA</span></li>
								<li><span>Event Duration: </span><span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->

	
						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span> <span>12-12-2023</span></li>
								<li><span>Event End Date: </span> <span>12-13-2023</span></li>
								<li><span>Event Location: </span> <span>USA</span></li>
								<li><span>Event Duration: </span> <span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->


						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span> <span>12-12-2023</span></li>
								<li><span>Event End Date: </span> <span>12-13-2023</span></li>
								<li><span>Event Location: </span> <span>USA</span></li>
								<li><span>Event Duration: </span> <span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->
	
					</ul>
	
		</ul><!--End null-tree-->
	
	</div><!--End null-tree-container-->

To add a sub-tree within a node, simply include another <li> element nested within the parent <li> element. Each sub-tree can contain its own set of nodes and sub-nodes, following the same hierarchical structure.

Events

Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Venue
  - Venue 1: Lorem, ipsum dolor.
  - Venue 2: Lorem, ipsum dolor.
  - Venue 3: Lorem, ipsum dolor.
  - Venue 4: Lorem, ipsum dolor.
  - Venue 5: Lorem, ipsum dolor.
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours

HTML |

<div class="null-tree-container">

	<ul class="null-tree">
					
				<span class="null-tree-main-title null-font-size-18 null-font-weight-bold">
					Events
				</span><!--End null-tree-main-title-->

				<ul>

					<li class="null-tree-list">
					
						<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">Event Title</div>
	
						<ul>
							<li><span>Event Description: </span><span>Lorem, ipsum dolor.</span></li>
							<li><span>Event Start Date: </span><span>12-12-2023</span></li>
							<li><span>Event End Date: </span><span>12-13-2023</span></li>
							<li><span>Event Location: </span><span>USA</span></li>
							<li><span>Event Duration: </span><span>30 Hours</span></li>
						</ul>
	
					</li><!--End null-tree-list-->



					<li class="null-tree-list">
					
						<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">Event Title</div>
	
						<ul>
							<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
						<li>
							<li class="null-tree-list">
					
								<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">Event Venue</div>
			
								<ul>
									<li><span>Venue 1: </span> <span>Lorem, ipsum dolor.</span></li>
									<li><span>Venue 2: </span><span>Lorem, ipsum dolor.</span></li>
									<li><span>Venue 3: </span><span>Lorem, ipsum dolor.</span></li>
									<li><span>Venue 4: </span><span>Lorem, ipsum dolor.</span></li>
									<li><span>Venue 5: </span></span><span>Lorem, ipsum dolor.</span></li>
								</ul>
			
							</li><!--End null-tree-list-->
						</li>
							<li><span>Event End Date: </span> <span>12-13-2023</span></li>
							<li><span>Event Location: </span> <span>USA</span></li>
							<li><span>Event Duration: </span> <span>30 Hours</span></li>
						</ul>
	
					</li><!--End null-tree-list-->


					<li class="null-tree-list">
					
						<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">Event Title</div>
	
						<ul>
							<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
							<li><span>Event Start Date: </span> <span>12-12-2023</span></li>
							<li><span>Event End Date: </span> <span>12-13-2023</span></li>
							<li><span>Event Location: </span> <span>USA</span></li>
							<li><span>Event Duration: </span> <span>30 Hours</span></li>
						</ul>
	
					</li><!--End null-tree-list-->

				</ul>

	</ul><!--End null-tree-->

</div><!--End null-tree-container-->

To display the first item of a null tree container on page load, you can add a unique class | ID to the container element that has the ".null-tree-container" class. Then, you can invoke the "null_tree" function with the container selector and set the second argument to "true". This will initialize the null tree and display the first item by default.

JS |

null_tree("#nullTree", true);

Events

Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours
Event Title
- Event Description: Lorem, ipsum dolor.
- Event Start Date: 12-12-2023
- Event End Date: 12-13-2023
- Event Location: USA
- Event Duration: 30 Hours

HTML |

<div class="null-tree-container" id="nullTree">
	
		<ul class="null-tree">
						
					<span class="null-tree-main-title null-font-size-18 null-font-weight-bold">
						Events
					</span><!--End null-tree-main-title-->
	
					<ul>
	
						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span><span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span><span>12-12-2023</span></li>
								<li><span>Event End Date: </span><span>12-13-2023</span></li>
								<li><span>Event Location: </span><span>USA</span></li>
								<li><span>Event Duration: </span><span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->

	
						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span> <span>12-12-2023</span></li>
								<li><span>Event End Date: </span> <span>12-13-2023</span></li>
								<li><span>Event Location: </span> <span>USA</span></li>
								<li><span>Event Duration: </span> <span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->


						<li class="null-tree-list">
						
							<div class="null-tree-list-title null-cursor-pointer null-color-main null-font-weight-bold null-display-inline-block">
								<span>Event Title</span>
							</div>
		
							<ul>
								<li><span>Event Description: </span> <span>Lorem, ipsum dolor.</span></li>
								<li><span>Event Start Date: </span> <span>12-12-2023</span></li>
								<li><span>Event End Date: </span> <span>12-13-2023</span></li>
								<li><span>Event Location: </span> <span>USA</span></li>
								<li><span>Event Duration: </span> <span>30 Hours</span></li>
							</ul>
		
						</li><!--End null-tree-list-->
	
					</ul>
	
		</ul><!--End null-tree-->
	
</div><!--End null-tree-container-->

Alert

Modal