Optimizing a nested list with folding options

Question

My question is based on this topic, but I would like to add a few functions.

The current code looks like that:

$(document).ready(function() {
  $('ol ol').hide();

  $('li').click(function() {
    $(this).children('ol').toggle();
  });
});

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  cursor: default;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  /* content: counters(item, ".", decimal-leading-zero) " "; */
  counter-increment: item;
}

li:has(ol):before {
  float: left;
  /* margin-bottom: 5px; */
}

ol ol {
  overflow: hidden;
}

.active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

The following is needed:

1. If you click Coffee or Tea, the the subordinate menu items should expand, but with a space from the left starting just below the word and not the digit, the way it was solved here.
2. It should only be possible to open one menu item at a time.
3. The menu item clicked last should toggle the .active class.
4. If there are more than 9 menu items, all menu items should start with a 0 in front of the respective digit so that everything is still on the fitting position.

Here is an example how it can look like:

Does someone know how to do that? I would be very grateful for help.

Answer 1

I would toggle a class and consider all the logic inside the CSS like below

$(document).ready(function() {
  $('li').click(function() {
    $('ol.active').removeClass("active");
    $(this).children('ol').addClass("active");
  });
});

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  cursor: default;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}
/* add leading 0 if more than 10*/
li:first-child:nth-last-child(n + 10):before,
li:first-child:nth-last-child(n + 10) ~ li:before{
  content: counters(item, ".", decimal-leading-zero) " ";
}

/* select li that has "ol" */
li:has(ol.active):before {
  float: left;
  margin-bottom: 5px; /* small value */
}

ol ol {
  overflow: hidden;
  display: none;
}
ol ol.active {
  color: green;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>
<hr>
<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
  <li>Cool</li>
  <li>Cool</li>
  <li>Cool</li>
  <li>Cool</li>
  <li>Cool</li>
  <li>Cool</li>
</ol>