I created a div for each list of spells, when the player selects the class should only appear the list of spells of this class but, it is not working in that case. Using your code I did the following: HTML
<span class="sheet-label sheet-label-class"><label for="class">Class:</label></span>
<select class="sheet-list sheet-list-class" name="attr_class">
<option value="" selected> </option>
<option value="1">Bard</option>
<option value="2">Warrior</option>
<option value="3">Thief</option>
<option value="4">Mage</option>
<option value="5">Ranger/option>
<option value="6">Cleric</option>
</select>
<input type="radio" name="attr_class" class="sheet-bard sheet-hide" value="1" checked>
<input type="radio" name="attr_class" class="sheet-warrior sheet-hide" value="2">
<input type="radio" name="attr_class" class="sheet-thief sheet-hide" value="3">
<input type="radio" name="attr_class" class="sheet-mage sheet-hide" value="4">
<input type="radio" name="attr_class" class="sheet-ranger sheet-hide" value="5">
<input type="radio" name="attr_class" class="sheet-cleric sheet-hide" value="6">
<div class="sheet-tab-content sheet-tab4">
<span class="sheet-label sheet-label-l-basic"><label for="l-basic">List basic.................Level.....Total</label></span>
<div class="sheet-list-mage sheet-list-magic" name"attr_list-mage">
<span class="sheet-label sheet-label-magic1"><label for="magic1">Magic1:</label></span>
</div>
<div class="sheet-list-cleric sheet-list-magic" name="attr_list-cleric">
<span class="sheet-label sheet-label-magic2"><label for="magic2">Magic2:</label></span>
</div>
</div>
CSS
.sheet-hide,
.sheet-list-magic { display: none; }
.sheet-mage:checked ~ .sheet-list-mage ,
.sheet-cleric:checked ~ .sheet-list-cleric, { display: inline; }
