JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Family Tree</title>
<style>
   
</style>
</head>
<body>

<div class="tree" id="tree"></div>

<script>
    // Define the tree structure as an object
    var treeData = {
        name: "Parent",
        children: [
            {
                name: "Child 1",
                children: [
                    { name: "Grandchild 1" }
                ]
            },
            {
                name: "Child 2",
                children: [
                    { 
                        name: "Grandchild 2",
                        children: [
                            { name: "Great Grandchild 1" },
                            { name: "Great Grandchild 2" },
                            { 
                                name: "Great Grandchild 3" ,
                                children: [
                                    { name: "Grandchild-10" },
                                    { name: "Grandchild-11" },
                                    { name: "Grandchild-12" },
                                    { name: "Grandchild-13" },
                                    { name: "Grandchild-14" }
                                ]
                            }
                        ]
                    },
                    { 
                        name: "Grandchild 3",
                        children: [
                            { name: "Great Grandchild 4" }
                        ]
                    }
                ]
            }
        ]
    };

    // Function to generate the HTML for a tree node
    function generateNodeHTML(node) {
        var html = `<li>`;
        html += `<a href="#" onclick="toggleBox('${node.name.replace(/\s+/g, '')}')">${node.name}</a>`;
        if (node.children) {
            html += `<div id="${node.name.replace(/\s+/g, '')}" class="box" style="display: block;">`;
   ...

CSS

.tree {
        margin: 0;
        padding: 0;
    }

    .tree ul {
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li {
        float: left;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .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;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }

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

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

    .tree li a {
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
  ...