Looking forward to seeing that!

So this is still work in progress early going....but its shows how the script works. I changed the logic of the script some (reversed) and added new names. togme and togon are the two classes that are used. togoff is not used in this case but I added it to show in the inspector of the browser. you have to have id's on the elements in order to use same classes on different elements for different settings. (I think that's the rule ?). You add the classes togme and togon to the element. once everything is set you can grey out togon which will be toggled off (removed) so any settings you make with togon greyed out will take effect.
Transitions are set with togon greyed out. Height and line height are set that way also. This allows for applying a added class effect to the parent and targeting the children also. If you want multiple actions you would need to duplicate script and change tog's to something like togme2 and togon2. Very early in this thinking but excited to try out on other projects I have run into where multiple actions need to be triggered. An argument will probably be made inline style sheet settings would be easier.....

Obviously I have not had time to add the breakpoints yet. Thought keep it simple them move down.

I should have more time this weekend....been a busy week.

Looks very interesting. Not sure if I understand all the various settings for the new classes, though. Need to practise a bit...

The last project example works mechanically but is not user friendly. It is not possible to see changes made to a element when deselecting classes (graying out) in order to have multiple css settings. Very hard to design that way.
So here are some improvements. I switched from finding all elements with a certain class name to searching for all elements with a certain data attribute. The data attribute defined in the jscript is "data-tog" and the value is "nest1".
This means we now only use the "togon" class along with another "unique" class name for the settings. I struggled for a while trying to come up with a way to see the changes on one element when adjusting (deselecting) the toggling class. Here is the trick. Assign your regular class name to the element along with "togon" class. Make all your "regular state" css settings. Now duplicate the element. Delete the "togon" class name on the copy so all you have left is your regular class name(s). Now adjust your css setting for the "activated state". Once you have the element looking right, delete the copy. The settings are now on both classes on the same original element. You can "grey out" or deselect the "togon" class and see the changes to the settings but you will not see the actual change in the design body. I have uploaded a example that shows the duplicated element copy to try.