Example: Nodes with Rich Content

jOrgChart nodes can contain any HTML markup. This example shows how to include links, paragraphs, and images within your chart nodes.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>jOrgChart - Rich Content Example</title>
    <link rel="stylesheet" href="../css/jquery.jOrgChart.css"/>
    <link rel="stylesheet" href="../css/custom.css"/> <!-- Using the example's custom styles -->
</head>
<body>

    <!-- Data source with rich HTML content in list items -->
    <ul id="org-data" style="display:none">
        <li>
            Food
            <ul>
                <li>Beer</li>
                <li>
                    Vegetables
                    <a href="http://wesnolte.com" target="_blank">Author's Site</a>
                    <ul>
                        <li>Pumpkin</li>
                        <li>
                            <a href="http://tquila.com" target="_blank">Aubergine</a>
                            <p>A link and paragraph work well together.</p>
                        </li>
                    </ul>
                </li>
                <li>
                    Fruit
                    <ul>
                        <li>Apple</li>
                        <li>Berries
                            <ul>
                                <li>Blueberry</li>
                                <li><img src="https://via.placeholder.com/60x30.png?text=Raspberry" alt="Raspberry"/></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <!-- Chart container -->
    <div id="chart-container"></div>

    <!-- JavaScript Libraries -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.jOrgChart.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("#org-data").jOrgChart({
                chartElement : '#chart-container'
            });
        });
    </script>

</body>
</html>

Explanation

  1. HTML in <li>: Notice how the <li> elements contain more than just text. We've included <a> tags for links, <p> tags for descriptive text, and even an <img> tag.
  2. Plugin Behavior: The jOrgChart plugin takes all the HTML content within an <li> (excluding any nested <ul> or <li> tags) and places it directly inside the generated <div class="node">.
  3. Clicking Links: The plugin includes logic to prevent the chart from collapsing when a link inside a node is clicked. This ensures that links are usable without interfering with the chart's expand/collapse functionality.