sharepoint enterprise – Need help with layout using custom CSS and JS. Want to lock down page and have web part zones at certain points

Apologies for the awful title.

I’ll try to explain this.

I have a standard page which was blank. On this I added some custom CSS and JS and make an accordion.
I am using this as a base.

The first problem I run into is if I edit the page and make changes (having to expand the accordion to get to certain bits of text) the accordion breaks and jams. It stays open and no longer works, so I have to roll back the page.

The only way I got around this was using Designer to just add text in. This causes more troubles as I’m not a coder. So when I try to add formatting, bold, tables or bullets in Designer, it’s all greyed out. Sometimes it isn’t. So confusing.

I suppose what would be handy perhaps is to have the accordion “locked” on the page. Then in each of the sections it has a web part zone. Then I could add my own custom parts when I needed them, without fear of the accordion breaking. If I need to change titles or icons, I could dive into designer to make those minor changes.

Any advice and help here is appreciated.