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 ;-)
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