JSFiddle - React, Tailwind, and code Playground

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
      </ul>

      <ul>
        <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
                  </ul>
                  <ul>
                    <li class="option">Manual Hostname
                  </ul>
              </ul>
          </ul>
      </ul>
      <ul>
        <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)
                  </ul>
                  <ul>
                    <li class="option">Small (2 cores - 4 GB memory)
                  </ul>
                  <ul>
                    <li class="option">Medium (4 cores - 8 GB memory)
                  </ul>
                  <ul>
                    <li class="option">Medium - memory optimized (4 cores - 16 GB memory)
                  </ul>
                  <ul>
                    <li class="option">Large (8 cores - 16 GB memory)
                  </ul>
                  <ul>
                    <li class="option">Large - memory optimized (8 cores - 32 GB memory)
  ...

CSS

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

ul.offering {
  list-style: none;
}

ul.tree li.option_set {
  color: lightblue;
}

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