Looking for some help for collapsing menu

I’m building my portfolio and I found code on another thread to create a collapsable ‘+’ and ‘-’ menu - so there are series of section titles with a + next to it and then once pressed it expands that section and the + becomes a -. This is the code:

export function text56_click(event, $w) {
let q = $w(‘#text56’);
let a = $w(‘#columnStrip2’);
if (a.collapsed) {
q.text = ‘-’.concat(q.text.substring(1));
a.expand();
}
else {
q.text = ‘+’.concat(q.text.substring(1));
a.collapse();
}

It’s all working great, except for one thing. When a section expands, the section header shifts slightly to the left by maybe 5 pixels, probably because the - is smaller than the +. I’ve tried adding in a space at this point, like this:

… q.text = ’ -'.concat(q.text.substring(1));

and it does weird things.

Can anyone help? It’s not a massive problem but it’s not as neat as I’d like if they shift slightly.

I’m new to code and building websites, incase you couldn’t tell :wink:

Holly

Wix already have a tutorial that might help you out.
https://www.wix.com/corvid/example/collapse-elements

Or check this tutorial out from Nayeli (Code Queen)
https://www.youtube.com/watch?v=HmTkf5af0NE - video for link below
https://codequeen.wixsite.com/double-collapse/double-collapse-code