Line Testing

by sberube

HTML

<div id="myRadioGroup">
  <ul class="offering">
    <li>
      <input type="radio" name="offering" checked="checked" value="1" /> T-systems (basic)
    </li>
    <li>
      <input type="radio" name="offering" value="2" />SLBAAS - NBN (1.0.0)
    </li>
    <li>
      <input type="radio" name="offering" value="3" />T-systems very long option
    </li>
    <li>
      <input type="radio" name="offering" value="4" />UBS
    </li>
  </ul>

</div>

<div id="offering1" class="desc">
  <ul class="tree">
    <li class="option_set">Cost Assignment
      <ul>
        <li class="option active">Customer Cost Center</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>
          </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">Large - memory optimized (8 cores - 32 GB memory)</li>
                    <li class="option">X-Large (16 cores - 32 GB memory)</li>
                    <li class="option">X-Large - memory optimized (16 cores - 64 GB memory)</li>
                    <li class="option">XX-Large (32 cores...

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