checking one checkbox closes all other checkboxes in HTML/CSS

To list portfolio items on https://khofstadter.info/ I use the idea for collapsible checkboxes from https://bernholdtech.blogspot.com/2013/04/very-simple-pure-css-collapsible-list.html.

How can I uncheck an active/open checkbox by checking another checkbox? I.e. I would like to make sure that only one checkbox is open all the time.

I've tried to use the solutions in related posts on Stackoverflow.

CSS

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList li > input {
 display: none;
}

.collapsibleList label {
 cursor: pointer;
}

HTML code

<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

I would ideally like to remain in CSS and HTML, but can go for JS if needed.

Thanks! k