tabs not toggling

I don't know what's wrong with my markup here, but the tabs aren't toggling between core and bio when I click on the buttons. Can anyone help tell me where I've gone wrong? html: < div class = "background" >       < section class = "tabstoggle_grid_container" >             < input class = "tabstoggle" type = "hidden" name = "attr_sheetTab" value = "core" />             < div class = "core tab-buttons" >                   < button class = "tabs" type = "action" name = "core" >                         Core                   </ button >             </ div >             < div class = "bio tab-buttons" >                   < button class = "tabs" type = "action" name = "bio" >                         Bio                   </ button >             </ div >       </ section >       < div class = "core" >             Contents of core        </ div >       < div class = "bio" >             Contents of bio       </ div > </ div > < script type = "text/worker" >       const buttonlist = ["core","bio"];       buttonlist.forEach(button => {           on(`clicked:${button}`, function() {               setAttrs({                   sheetTab: button                         });                   });             }); </ script > css: .charsheet input.tabstoggle [ value = "core" ] ~ div.core , .charsheet input.tabstoggle [ value = "bio" ] ~ div.bio {     display : block; } please tell me it's a simple fix like i've forgotten a bracket or something haha

There's a couple of problems there - first off, try to stick to lower case or snake case for attribute names, it'll avoid a few bugs that pop up in places. That's covered in Best Practices on the wiki . So that would be sheet_tab instead of sheetTab. You action buttons also need the act_ prefix in their names, so act_core and act_bio - there are examples on the wiki . These are both fairly base level errors to be making, so I'd strongly recommend having a good read of the Character Sheet Building part of the wiki - it'll save you hours of frustration later if you get familiar with basics, for example the buttons page will tell you what the required prefixes on all the button types are. When you're dealing with sheetworkers, you should also be logging (and logging heavily while you're learning). There's no point trouble-shooting a handler when it isn't even firing. So: const buttonlist = ["core","bio"]; buttonlist.forEach(button => { on(`clicked:${button}`, function() { console.log(`Click event fired for button "${button}"`); setAttrs({ sheetTab: button }); }); }); That one extra line will let you know if the click is even registering on the button, and helps narrow the problem down. If it isn't firing, you've messed up the HTML or the event name. If it is firing but nothing's happening, the error is in the sheetworker after that logged line. Finally, it's a little easier to read code if you use the forum's code block formatting - the magic wand icon to the left of the B bold control in the top left of the frame has a dropdown with a few styles. edit - your CSS also won't work. I'll let you read #6 in Common Mistakes and see if you can figure out why :)