Arogopaz – Crypto Coin NFT Web3 Blockchain News and Development
Horizontal Tree View Structure Bootstrap with Image.
We’ll create an interactive family tree using HTML, CSS, and jQuery. The example provided demonstrates a dynamic and collapsible family tree structure, perfect for visualising hierarchical relationships. We’ll break down the code into its components to understand how it all works together.
This code creates a dynamic and interactive family tree using HTML for structure, CSS for styling, and jQuery for interactivity. The combination of these technologies provides a visually appealing and user-friendly way to display hierarchical data. By following this example, you can customise and expand the family tree to suit your specific needs, making it a powerful tool for genealogical projects or organisational charts.
Preview
HTML Structure
The HTML structure is fundamental to the family tree. Here’s a simplified version of the provided HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Tree View Structure Bootstrap with Image</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="body genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Person</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-1</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-2</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-1</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-1</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-2</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-3</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-2</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 1-3-3</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>Member 2</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-details">
<h3>John Doe</h3>
<p>Designation</p>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS Styling
The CSS provided styles the family tree and scrollbar. Here’s a breakdown of the key styles:
/* Custom Scrollbar */
.genealogy-scroll::-webkit-scrollbar {
width: 5px;
height: 8px;
}
.genealogy-scroll::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #e4e4e4;
}
.genealogy-scroll::-webkit-scrollbar-thumb {
background: #212121;
border-radius: 10px;
transition: 0.5s;
}
.genealogy-scroll::-webkit-scrollbar-thumb:hover {
background: #d5b14c;
transition: 0.5s;
}
/* Genealogy Tree */
.genealogy-body {
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;
}
.genealogy-tree ul {
padding-top: 20px;
position: relative;
padding-left: 0px;
display: flex;
}
.genealogy-tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
.genealogy-tree li::before, .genealogy-tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #ccc;
width: 50%;
height: 18px;
}
.genealogy-tree li::after {
right: auto;
left: 50%;
border-left: 2px solid #ccc;
}
.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
display: none;
}
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after {
border: 0 none;
}
.genealogy-tree li:last-child::before {
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
}
.genealogy-tree li:first-child::after {
border-radius: 5px 0 0 0;
}
.genealogy-tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #ccc;
width: 0;
height: 20px;
}
.genealogy-tree li a {
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
}
.genealogy-tree li a:hover+ul li::after,
.genealogy-tree li a:hover+ul li::before,
.genealogy-tree li a:hover+ul::before,
.genealogy-tree li a:hover+ul ul::before {
border-color: #fbba00;
}
/* Member Card */
.member-view-box {
padding: 0px 20px;
text-align: center;
border-radius: 4px;
position: relative;
border: 1px solid #00000040;
}
jQuery Script
The jQuery script adds interactivity to the family tree. Here’s the complete script:
$(function () {
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
})
- Initial Setup: Hides all nested lists (
ul) except the top-level list and any list marked as active. - Click Event Handler: Adds a click event to each list item (
li). When clicked, it toggles the visibility of the immediate nested list (ul), adding or removing theactiveclass accordingly. ThestopPropagationmethod ensures the event doesn’t bubble up, affecting other elements
Categories
- Airdrop (1)
- Learn (34)
- Blockchain (21)
- HTML CSS JS (2)
- Trading (11)