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.

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?

Answer 1

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>