Ah OK - have you added more of the buttons/hidden inputs? If so, what are their names? If they're still abil-diffmods and abil-dicepool, it's going to cause the issue you're describing. The other problem could be if the old CSS rules are still there - though, I don't think they should be doing much since I forgot the "sheet-" prefix for Legacy on those ones. It's probably just the names that are the problem - "abil" is pretty generic, it's probably better to use the skill name of the section. So in the above HTML, the <input> and <button> names would change to use "alert" instead of "abil": < button type = "action" class = "collapse-button" name = "act_collapse-alert-diffmods" > Difficulty Modifier </ button > < input type = "hidden" name = "attr_collapse-flag-alert-diffmods" value = "1" > and < button type = "action" class = "collapse-button" name = "act_collapse-alert-dicepool" > Dice Pool </ button > < input type = "hidden" name = "attr_collapse-flag-alert-dicepool" value = "1" > The event listener then needs to change accordingly: on ( 'clicked:collapse-alert-diffmods clicked:collapse-alert-dicepool' , ( ev ) => { let section = ( ev . triggerName . match ( /collapse- ( . * ) / i ) || [])[ 1 ]; console . info ( `Collapse event triggered on section: " ${ section } "` , ev ); toggleAttr ( `collapse-flag- ${ section } ` , true ); }); As a quick explanation of the event listener: Roll20 events are fired when specific things happen - an attribute change, a button is clicked etc. If you register an event listener, the specified function will run when the event occurs. Roll20 will also generate an event object containing some information on what happened to trigger the event. The (ev) parameter before the start of the function is short for 'event', and passes the event data into the function below. This event object will contain different data depending on the triggering event - for example, an attribute change event will include the previous & the new values of the attribute. The only thing we're interested in here is the name of the button that was clicked - and that's only because we're registering multiple buttons at once, so we need to know which one triggered an event. If you only had a single button registered in the listener, you wouldn't need the event object, as there's no ambiguity about what triggered the event. The second line uses a regular expression match to pinch the section name from the triggering event data that Roll20 gave us. So when the button named "act_collapse-alert-diffmods" is clicked, the triggerName property passed through in the event object will be "clicked:collapse-alert-diffmods" (Roll20 drops the "act_" prefix which denotes an action button name). As long as we follow the same naming convention for all buttons, 'act_collapse-<section name>', we're only interested in the section name part - that's what the regex match is grabbing. So in this case, we've defined a variable 'section' which now has the value 'alert-diffmods'. (for the sake of completeness, the || [ ] part after the .match() function is a bit of error handling. If the match() function fails and returns 'undefined', the logical OR operator will return the value on the right instead, which is an empty Array [ ]. The next instruction is [1], which references the second value in an Array (which is the value we want if the match() function is successful). This will cause a crash when passed on 'undefined', while it won't when passed on an empty Array. While the match() *shouldn't* fail provided the button names are all correct, it's nice to prevent nasty errors where it doesn't take much typing) The third line logs what's just happened - that's where we can check if something is wrong with the event object, or the regex match, if the function is not working. Finally, the fourth line calls our other function to do a simple 0 => 1 or 1 => 0 toggle. It passes through a value by using a template literal : `collapse-flag-${section}`. This creates a new string from the "collapse-flag-" literal text, and inserts the value of our 'section' variable into the ${} enclosed part. Again, as long as we stick to the naming convention of 'collapse-flag-<section name>', where the section name is an exact match of the <button>'s section name, this function will turn the button name, into the attribute name we require for toggling the section. Now, on to adding more buttons. The simplest way is to just keep adding 'clicked' events. So for 'awareness' you would add the <input> and <button> HTML to your section so it's the same as the 'alert' section, but with the <button> and <input> names changed to 'act_collapse-awareness-diffmods' and 'collapse-flag-awareness-diffmods' for the diffmods part, and 'act_collapse-awareness-dicepool', 'collapse-flag-awareness-dicepool' for the dicepool. Then change the top line of the event listener to include the new Awareness button: on ( 'clicked:collapse-alert-diffmods clicked:collapse-alert-dicepool clicked:collapse-awareness-diffmods clicked:collapse-awareness-dicepool' , ( ev ) => { Now, this is clearly going to end up a very long line if you're adding a bunch of sections. So using a transform is a good option here. First, store all of your skill/ability names in an array. This is immensely useful if you're adding more code - you don't want to be spelling out long lists of skills/attributes/abilities any more than you have to: The names you use here need to match the attribute names, not the display text. So, to match what's in your HTML, the start would be: const abilities = [ 'Art' , 'Awareness' , 'Alert' , 'AnimalKen' ]; (as a side note, underscores to denote a space in attribute names are useful - they allow you to use a simple function to turn an attribute name into a display name. While you can do this by inserting a space before capital letters, it's trickier). You can then use Javascript .map() to transform your skill list into the required text very easily: let abilityButtonEvents = abilities . map ( ability => `clicked:collapse- ${ ability } -diffmods clicked:collapse- ${ ability } -dicepool` ); The expected output of the above .map() function: ['clicked:collapse-art-diffmods clicked:collapse-art-dicepool', 'clicked:collapse-awareness-diffmods clicked:collapse-awareness-dicepool', 'clicked:collapse-alert-diffmods clicked:collapse-alert-dicepool', 'clicked:collapse-animalken-diffmods clicked:collapse-animalken-dicepool'] This is still an Array, which is no good for the event listener line. So we'd use join() to join the array parts back into a single string before handing it to Roll20's on() event listener, taking care to insert a space between the array parts to stop them running into each other. So you first line now become much more readable: on ( abilityButtonEvents . join ( ' ' ), ( ev ) => { // rest of function in here }); You can then add more sections to your 'abilities' Array quickly and easily. Using .map() to generate the button names also cuts down on the potential for typos. I've linked w3schools above as it's pretty easy to understand. As you get more comfortable with Javascript, the MDN documentation is much better - but it can be pretty overwhelming when you're new to JS.
