family tree 1.10

by velo_ninja

HTML

<div class="tree">
    <ul>
        <li>
            <a href="#" onclick="toggleBox('parent')">Parent</a>
            <div id="parent" class="box" style="display: none; background-color: lightblue;"> 
                Parent Box
                <img src="parent_image.jpg" alt="Parent Image">
            </div>

            <ul>
                <li>
                    <a href="#" onclick="toggleBox('child1')">Child</a>
                    <div id="child1" class="box" style="display: none; background-color: lightgreen;">
                        Child Box 1
                        <img src="child1_image.jpg" alt="Child 1 Image">
                    </div>

                    <ul>
                        <li>
                            <a href="#" onclick="toggleBox('grandchild1')">Grand Child</a>
                            <div id="grandchild1" class="box" style="display: none; background-color: lightcoral;">
                                Grand Child Box 1
                                <img src="grandchild1_image.jpg" alt="Grand Child 1 Image">
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" onclick="toggleBox('child2')">Child</a>
                    <div id="child2" class="box" style="display: none; background-color: lightsalmon;">
                        Child Box 2
                        <img src="child2_image.jpg" alt="Child 2 Image">
                    </div>

                    <ul>
                        <li>
                            <a href="#" onclick="toggleBox('grandchild2')">Grand Child</a>
                            <div id="grandchild2" class="box" style="display: none; background-color: lightyellow;">
                                Grand Child Box 2
                                <img src="grandchild2_image.jpg" alt="Grand Child 2 Image">
                            </div>
                        </li>
                ...

CSS

.tree {
    display: flex;
    justify-content: center;
}

.tree ul {
    padding-top: 20px;
    position: relative;
    list-style-type: none;
    text-align: center;
}

.tree li {
    position: relative;
    padding: 20px 5px 0 5px;
    cursor: pointer;
}

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}

.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

.tree li:only-child {
    padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

.tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

.tree .box {
    position: absolute;
    display: none;
    background-color: lightblue;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    z-index: 1;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

JavaScript

// Define tree data in a hierarchical structure
const treeData = [
    {
        label: 'Parent',
        children: [
            {
                label: 'Child 1',
                children: [
                    {
                        label: 'Grand Child 1',
                        children: []
                    }
                ]
            },
            {
                label: 'Child 2',
                children: [
                    {
                        label: 'Grand Child 2',
                        children: []
                    }
                ]
            }
        ]
    }
    // Add more nodes as needed
];

// Function to generate the tree structure
function generateTree(parentElement, data) {
    const ul = document.createElement('ul');
    data.forEach(nodeData => {
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.textContent = nodeData.label;
        a.href = '#';
        a.addEventListener('click', () => toggleBox(li));
        li.appendChild(a);
        ul.appendChild(li);
        if (nodeData.children.length > 0) {
            generateTree(li, nodeData.children);
        }
    });
    parentElement.appendChild(ul);
}

// Function to toggle the box visibility
function toggleBox(li) {
    const box = li.querySelector('.box');
    if (box.style.display === 'none' || !box.style.display) {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }
}

// Function to initialize the tree
function initTree() {
    const treeContainer = document.getElementById('tree');
    generateTree(treeContainer, treeData);
}

// Initialize the tree
initTree();