Line Testing

by sberube

HTML

<div id="capsule_tree" class="desc">
  <ul class="tree">
    <li class="option_set">
Artifacts to 
      <ul>
        <li class="option active">
          Customer Cost Center
        </li>
      </ul>
    </li>
    <li class="option_set">
      General Settings
      <ul>
        <li class="option active">
          General Settings
          <ul>
            <li class="option_set">
              Hostname
              <ul>
                <li class="option active">
                  Automatic Hostname
                </li>
                <li class="option">
                  Manual Hostname
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="option">
          Additional Settings
          <ul>
            <li class="option_set">
              Hostname XXX
              <ul>
                <li class="option active">
                  Automatic Hostname
                </li>
                <li class="option">
                  Manual Hostname
                </li>
              </ul>
            </li>
          </ul>
      </ul>
      </li>
      <li class="option_set">
        Detailed Settings
        <ul>
          <li class="option active">
            Detailed Settings
            <ul>
              <li class="option_set">
                Size
                <ul>
                  <li class="option active">
                    Micro (1 core - 2 GB memory)
                  </li>
                  <li class="option">
                    Small (2 cores - 4 GB memory)
                  </li>
                  <li class="option">
                    Medium (4 cores - 8 GB memory)
                  </li>
                  <li class="option">
                    Medium - memory optimized (4 cores - 16 GB memory)
                  </li>
                  <li class="option">
                    Large (8 cores - 16 GB memory)
                  </li>
                  <li class="option">
                   ...

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();
  });
});