As someone who isn't a professional coder, I dabble in creating code for fun. Right now, I'm working on a roleplay project on a website where each character has a designated "space" to input HTML and CSS code as a template. I've stumbled upon some code snippets on Tumblr by searching for "roleplay, tabilla, etc." Most of these templates use radio buttons as links to different sections, but I'm struggling to grasp how it works. Here's an example I came across:
<input type="radio" id="cncl-1" name="cncl_group" checked="checked" />
<input type="radio" id="cncl-2" name="cncl_group" />
<input type="radio" id="cncl-3" name="cncl_group" />
<input type="radio" id="cncl-4" name="cncl_group" />
<input type="radio" id="cncl-5" name="cncl_group" />
<div class="cncl-tabs">
<div class="cncl-content">
---the remainder of the code is too extensive---
<div class="cncl-labels">
<label for="cncl-1">i</label>
<label for="cncl-2">ii</label>
<label for="cncl-3">iii</label>
<label for="cncl-4">vi</label>
<label for="cncl-5">v</label>
</div>
As for the CSS style:
.conciliate input[type="radio"]:nth-of-type(1):checked ~ .cncl-tabs .cncl-content div:nth-child(1),
.conciliate input[type="radio"]:nth-of-type(2):checked ~ .cncl-tabs .cncl-content div:nth-child(2),
.conciliate input[type="radio"]:nth-of-type(3):checked ~ .cncl-tabs .cncl-content div:nth-child(3),
.conciliate input[type="radio"]:nth-of-type(4):checked ~ .cncl-tabs .cncl-content div:nth-child(4),
.conciliate input[type="radio"]:nth-of-type(5):checked ~ .cncl-tabs .cncl-content div:nth-child(5) {
display: block;
animation: aparecer 1.5s;
}