My Tabs are not working on my custom sheet

Hello !! :) Here is the Git Hub, do you have any idea why it shows up like this ??? I'm probably blind or something, I can't find the mistake :(( <a href="https://github.com/WiziDeus/hero-sheet" rel="nofollow">https://github.com/WiziDeus/hero-sheet</a>

On a quick look over my lunch break, I would say that your values for displaying the tabs in the css: /* show the selected tab */ .charsheet .sheet-tabstoggle[value="Identité"] ~ div.sheet-Identite, .charsheet .sheet-tabstoggle[value="Inventaire"] ~ div.sheet-Inventaire, .charsheet .sheet-tabstoggle[value="Capacités"] ~ div.sheet-Capacites, .charsheet .sheet-tabstoggle[value="Modificateurs"] ~ div.sheet-Modificateurs { display: block; } Those don't seem to line up with the values in your html: &lt;input type="radio" name="attr_tab" class="sheet-tab1" value="1" checked="checked"&gt;Identité &amp; Compétences&lt;span title="Identite"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab2" value="2"&gt;Inventaire&lt;span title="Inventaire"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab3" value="3"&gt;Capacités&lt;span title="Capacites"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab4" value="4"&gt;Modificateurs&lt;span title="Modificateurs"&gt;&lt;/span&gt; Maybe someone with more time will have a chance to spot anything else that may be out of place.

It looks like this now, I've updated it on the Git Hub, but it still doesn't work :(( CSS :&nbsp; /* show the selected tab */ .charsheet .sheet-tabstoggle[value="Identite"] ~ div.sheet-Identite, .charsheet .sheet-tabstoggle[value="Inventaire"] ~ div.sheet-Inventaire, .charsheet .sheet-tabstoggle[value="Capacites"] ~ div.sheet-Capacites, .charsheet .sheet-tabstoggle[value="Modificateurs"] ~ div.sheet-Modificateurs { display: block; } HTML :&nbsp; &lt;input type="radio" name="attr_tab" class="sheet-tab1" value="1" checked="checked"&gt;Identité&lt;span title="Identite"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab2" value="2"&gt;Inventaire&lt;span title="Inventaire"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab3" value="3"&gt;Capacités&lt;span title="Capacites"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tab4" value="4"&gt;Modificateurs&lt;span title="Modificateurs"&gt;&lt;/span&gt;

This doesn't look right: input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4 There's no declaration block following that - I'd be surprised if any CSS works after that. By the way, I'm not a fan of questions where the asker has done nothing to help the answerers. There's no need to ask us to look at the entire sheet code and try to figure out what part is relavant to your question. You could make it easier to help you, and&nbsp; had done so, you'd have spotted the above coding error yourself.

Also Kraynic was pointing out a different error, and you haven't fixed it. You have this CSS block: /* show the selected tab */ .charsheet .sheet-tabstoggle[value="Identite"] ~ div.sheet-Identite, .charsheet .sheet-tabstoggle[value="Inventaire"] ~ div.sheet-Inventaire, .charsheet .sheet-tabstoggle[value="Capacites"] ~ div.sheet-Capacites, .charsheet .sheet-tabstoggle[value="Modificateurs"] ~ div.sheet-Modificateurs { display: block; } That suggests the HTML should be &lt;input type="radio" name="attr_tab" class="sheet-tabstogggle" value="Identite" checked="checked"&gt;Identité &amp; Compétences&lt;span title="Identite"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tabstogggle" value="Inventaire"&gt;Inventaire&lt;span title="Inventaire"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tabstogggle" value="Capacites"&gt;Capacités&lt;span title="Capacites"&gt;&lt;/span&gt; &lt;input type="radio" name="attr_tab" class="sheet-tabstogggle" value="Modificateurs"&gt;Modificateurs&lt;span title="Modificateurs"&gt;&lt;/span&gt; If you try that, and completely delete the code in my previous post, it might work. Personally, though, I'd look at the sheet worker and action button method on the wiki, I think it's an easier method than the pure CSS approach.

Hello GiGs,&nbsp; thank you for your answer. I'm really sorry if the way I asked was irrelevant or impolite, I didn't mean it. I'm struggling with HTML and CSS 'cause I'm really new to it and I don't understand everything I code (I basicly just look to other sheets and try to figure out what does what). I don't have the skills to understand clearly what I've done wrong, and I'm truely sorry if it's a bad way to ask for help. If there is a way for me to make thing simpler, please tell me, I'll do it !&nbsp; I tried to change the HTML, and deleted the part you told me about in the CSS, but still doesn't work :( I'll look at the actio button method on the wiki and see if I can do it in another way. If you have any other suggestion, I'd be pleased to read them !

I've tried to changer everything and to switch to the action button way (updated on Git Hub) but it seems like the issue doesn't come from there cause the sheet is still not displaying anything :( Maybe it comes from the HTML it self, but I have no Idea how to identify the origin of this bug&nbsp;

Since you took my rant so well, I had a look at your updated code. You are almost there, you just need to add the sheetworker code at the very bottom of your html: &lt; script type = "text/worker" &gt; &nbsp; &nbsp; const buttonlist = [ "Identite" , "Inventaire" , "Capacites" , "Modificateurs" ]; &nbsp; &nbsp; buttonlist . forEach ( button =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; on ( `clicked: ${ button } ` , function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs ({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetTab: button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; }); &lt;/ script &gt; Also, your fourth action button needs to be &lt; button type = "action" name = "act_modificateurs" &gt; Modificateurs &lt;/ button &gt; Notice the s on the end there.

This part is the important part: const buttonlist = ["Identite", "Inventaire", "Capacites", "Modificateurs"]; You can change that to add extra divs you want to hide, but just adding extra action button names there, like const buttonlist = ["Identite", "Inventaire", "Capacites", "Modificateurs", "Extra"]; As you then just need to set the CSS up to look for that new name, as you have already done with the other 4.

Finally it worked !! Thank you very much for your help and you time !

Great! I feel it necessary to point out: your html uses a lot of tables. If you are planning to share the sheet with the community, you''' have to remove this: the roll20 devs always reject a sheet that uses tables for layout. Also you have fieldsets inside tables, which is always a bad idea. They dont work together well. You can replace tables easily with CSS grid, and the code is easier to write. <a href="https://cybersphere.me/css-grid/" rel="nofollow">https://cybersphere.me/css-grid/</a>