Customizing 5e OGL Sheet

Got an odd issue going on now.
I am wanting to use the OGL version but modify it to include some "handouts" for my players using the radio button input. Unfortunately, it is not working as expected.

Created a 2nd line of radio buttons labeled "Movement", "Combat", "Spellcasting", and "Conditions".
You must first click "Handouts" (on original line) to get the 2nd line to show up. Then click an option in 2nd line to get the specific handouts.
Problem is when you click on the 2nd line, everything disappears even though I added <div> to create the page.

Maybe someone could guide me in the right direction.

Theodore S. said:

Got an odd issue going on now.
I am wanting to use the OGL version but modify it to include some "handouts" for my players using the radio button input. Unfortunately, it is not working as expected.

Created a 2nd line of radio buttons labeled "Movement", "Combat", "Spellcasting", and "Conditions".
You must first click "Handouts" (on original line) to get the 2nd line to show up. Then click an option in 2nd line to get the specific handouts.
Problem is when you click on the 2nd line, everything disappears even though I added <div> to create the page.

Maybe someone could guide me in the right direction.

Sad that no one is able to assist

Often the best way to get help with sheet code is to supply the existing section of code giving you trouble, there are some very helpful people out there who will be able to help you with that information.

As the code is super long, I have included the link to my Github:

https://github.com/tstory30/5e-OGL-Custom

I did find out that I broke the whole sheet currently but will be updating it as I find issues.

I'm not exactly sure what you're trying to do, but here's a code snippet showing how to make tabs:

html

<div class="tabs">
	<input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="Movement" checked="checked"/> 
	<span class="sheet-tab sheet-tab1" style='line-height: 20px;'>Movement</span>
	<input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Combat" /> 
	<span class="sheet-tab sheet-tab2" style='line-height: 20px;'>Combat</span>
	<input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="3" title="Spellcasting" /> 
	<span class="sheet-tab sheet-tab3" style='line-height: 20px;'>Spellcasting</span>
	<input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="4" title="Conditions" /> 
	<span class="sheet-tab sheet-tab4" style='line-height: 20px;'>Conditions</span>

	<div class="sheet-section sheet-section-1">
		...stuff
	</div>

	<div class="sheet-section sheet-section-2">
		...stuff
	</div>

	<div class="sheet-section sheet-section-3">
		...stuff
	</div>

	<div class="sheet-section sheet-section-4">
		...stuff
	</div>
</div>

CSS

.charsheet div[class^="sheet-section"] {
    display: none;
    padding: 10px;
}

.charsheet input.sheet-tab1:checked ~ div.sheet-section-1,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-2,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-3,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-4 {
    display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
    display: block;
}

That worked Kristy.

Glad to hear it!