Creating organizational chart structure using CSS and JQuery

Question

I was checking on stack forum Trees in Twitter Bootstrap, It was really interesting to see what you can achieve through CSS. Since the example mentioned in the link is of vertical flow, Is it possible to acheive same as horizontal flow. For e.g. enter image description here

For reference I added the JS Fiddle link: http://jsfiddle.net/Fh47n/

<div class="tree">
<ul>
    <li>    <a href="#">Parent</a>

        <ul>
            <li>    <a href="#">Child</a>

                <ul>
                    <li>    <a href="#">Grand Child</a>

                    </li>
                </ul>
            </li>
            <li>    <a href="#">Child</a>

                <ul>
                    <li><a href="#">Grand Child</a>
                    </li>
                    <li>    <a href="#">Grand Child</a>

                        <ul>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                            <li>    <a href="#">Great Grand Child</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Grand Child</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<style type="text/css">
        .tree li {
        margin: 0px 0;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0px 5px;
    }
    .tree li::before {
        content:'';
        position: absolute;
        top: 0;
        width: 1px;
        height: 100%;
        right: auto;
        left: -20px;
        border-left: 1px solid #ccc;
        bottom: 50px;
    }
    .tree li::after {
        content:'';
        position: absolute;
        top: 30px;
        width: 25px;
        height: 20px;
        right: auto;
        left: -20px;
        border-top: 1px solid #ccc;
    }
    .tree li a {
        display: inline-block;
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    /*Remove connectors before root*/
     .tree > ul > li::before, .tree > ul > li::after {
        border: 0;
    }
    /*Remove connectors after last child*/
     .tree li:last-child::before {
        height: 30px;
    }
    /*Time for some hover effects*/

    /*We will apply the hover effect the the lineage of the element also*/
     .tree li a:hover, .tree li a:hover+ul li a {
        background: #c8e4f8;
        color: #000;
        border: 1px solid #94a0b4;
    }
    /*Connector styles on hover*/
     .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before {
        border-color: #94a0b4;
    }
</style>

I know about google chart https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1 but I dont want to use this one as my requirement is very specific which may not be feasible.

Any guru who can help?

http://jsfiddle.net/jme11/Fh47n/347/ Taken from: http://thecodeplayer.com/walkthrough/css3-family-tree — jme11, Feb 09 '15 at 15:49
@jme ,Thanks much for sharing the link, I'll try and let you know if it works...Excited to see that its possible... — Joshua I, Feb 09 '15 at 19:03
The only problem I see is on resizing the connectors are lost. Is there anyway I can avoid that... — Joshua I, Feb 10 '15 at 09:34
Please check the following answer.. https://codepen.io/jeevasusej/pen/ggaJLE — Jeeva J, Jan 10 '17 at 05:49

dabeng · Answer 1 · 2020-01-16T02:48:00.270

This is my solution based on OrgChart. Hope it's a good helper for you.

$(function() {

  var oc = $('#chart-container').orgchart({
    'data' : $('#ul-data')
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css" rel="stylesheet"/>

<ul id="ul-data">
  <li><a href="#">Parent</a>
    <ul>
      <li><a href="#">Child</a>
        <ul>
          <li><a href="#">Grand Child</a></li>
        </ul>
      </li>
      <li><a href="#">Child</a>
        <ul>
          <li><a href="#">Grand Child</a></li>
          <li><a href="#">Grand Child</a>
            <ul>
              <li><a href="#">Great Grand Child</a></li>
              <li><a href="#">Great Grand Child</a></li>
              <li><a href="#">Great Grand Child</a></li>
            </ul>
          </li>
          <li><a href="#">Grand Child</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<div id="chart-container"></div>

Creating organizational chart structure using CSS and JQuery

1 Answers1

Linked