Line Testing

by sberube

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<p>
This example is using font-awesome icons, but same approach can be used for our grommet font pack.
</p>

<div id="capsule_tree" class="desc">
  <ul class="tree">
    <li class="option_set">
      Service Blueprints
      <ul>
        <li class="option">
          <i class="fa fa-exclamation-warning"></i>&nbsp;vCenter- F5 Networks BIGIP LTM Load...
        </li>
        <li class="option">
          vCenter- F5 Networks BIGIP LTM Load...
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Offerings
    </li>
    <li class="option_set">
      Resource Offerings
      <ul>
        <li class="option">
          F5 Load Balancing Service 17.8.1
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Component Templates
      <ul>
        <li class="option">
          Template 1
        </li>
        <li class="option">
          Template 2
        </li>
      </ul>
    </li>
    <li class="option_set">
      Service Component Types
      <ul>
        <li class="option">
          Type 1
        </li>
        <li class="option">
          Type 2
        </li>
      </ul>
    </li>
    <li class="option_set">
      OO Content Packs
      <ul>
        <li class="option">
          f5-big-ip-ltm-load-balancer-17.8.5
        </li>
        <li class="option">
          vcenter-compute-16.12
        </li>
        <li class="option">
          oo-f5-cp-2.0.1
        </li>
        <li class="option">
          base-utility-17.9.2
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

body {
  font-size: 12px;
  font-family: arial;
  color: #333333;
}

.desc {
  width: 250px;
  border: 1px solid #b2b2b2;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
}

ul.offering {
  list-style: none;
}

ul.tree li.option_set {
  color: #0073e7;
}

ul.tree li.option {
  text-overflow: ellipsis;
  white-space: nowrap;
}

ul.tree li.option.active {
  font-weight: bold;
}

ul.tree li.option:not(.active) .option_set {
  display: none;
}

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 5px;
}

ul.tree li {
  margin: 0;
  padding: 0 7px;
  line-height: 20px;
  color: #333;
  font-weight: 400;
  border-left: 1px solid #BFBFBF;
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 7px;
  color: white;
  border-bottom: 1px solid #BFBFBF;
  content: "";
  display: inline-block;
  left: -7px;
}

ul.tree li:last-child:before {
  border-left: 1px solid #BFBFBF;
}

JavaScript

$(document).ready(function() {
  $("input[name$='offering']").click(function() {
    var test = $(this).val();

    $("div.desc").hide();
    $("#offering" + test).show();
  });
});