Hi guys, hope you’re not getting too fed up of my questions. But at least I am playing with the new toys you’ve given us.
I’ve successfully replicated the ‘showing a photo at the click of a button’ interaction but i am unable to do the same with a text box. Please can you help?
Here’s what i am trying to achieve: A simple list of sub headings as per the screenshot of the page.
We operate with integrity
We are passionate
We challenge
Then when the customer clicks the > this turns to point downwards and the text is revealed. It then disappears when the click the > again and it turn back to its original position.
Let me see if I understand what you wanna do. You wanna have a > shape that when clicked, a text will appear below it and the shape will now point down? clicking again will hide the text and make the share?
By having three text boxes positioned one above the other, you can collapse the one in the middle (the paragraph) and get the result on the right. Then you add an event handler to the shape > for onClick, and in the on click event you expand the paragraph (or collapse it, if it is already expanded).
To change the shape > from pointing right to down, you just position another shape on top of it set to be hidden on load. On click on the > shape you hide it and show the other one. You need to also add an onClick event handler for the second shape to manage the collapse and toggle of the shapes again.
Hi Yoav.
Just thought i’d let you see the fruits of my labour. Thank you so much for helping me execute this. It’s been a real revelation. It’s early days in my learning ( and I am an absolute coding virgin) but I can see how this is going to enhance my skills in a huge way.
Here’s the site i’m building so far. I’ve included a gallery linked to a dynamic page for the services, and a hide and show as per your last help.I am very pleased with myself! https://sianet.wixsite.com/quantenergy
is there any youtube video showing this function being setup step by step? I’m looking to do expand and collapse a photo from shorter to taller, which is very similar to this
so I am doing something similar but not this exactly. I need one checkbox make several other check boxes appear and then when you click the same checkbox again everything collapses again. So basically im asking if i can make one “shape” expand something in when you click once and when you click again everything will collapse again. Thank you
Hi there, I have a similar question and I hope I’m not asking the same question! I need to get my text boxes to expand like the attached image, so that the plus changer to a minus. What is the best way to go about this? Many Thanks in advance!
Hi @Ali and @Shona,
Here’s what I did to get this effect:
Add a repeater.
Enable code editing (the “Code” menu at the top).
Right click on the text object (the one you want to hide) > View properties.
Note the ID (you can also change it - in my case it’s named “qa1a”).
If you want it to be hidden at the start, check the “Collapsed on load option”.
Right click on the title object (the text with the “+” at the start) > View properties.
Note the ID (“qa1q” in my case).
Under the “Events” section, put your cursor on where it says “onClick” and then click the “+” on the right of it, then press Enter. This will create a new method in the code, and jump to it. You can see this in the code window at the bottom (it might be hidden, and you will need to drag it up to see).
Now you need to insert the code. I’m using my IDs here – if you used different ones, you will need to change it:
export function qa1q_click(event, $w) {
let q = $w('#qa1q');
let a = $w('#qa1a');
if (a.collapsed) {
q.text = '-'.concat(q.text.substring(1));
a.expand();
}
else {
q.text = '+'.concat(q.text.substring(1));
a.collapse();
}
}
Hi @tomerv
I’m trying to do here what you wrote, but I can’t keep one simple element. What I’m trying to do is having for example “+ Locals” at first and then expanding it. I can expand it but the “+” from the front either goes away or the code makes another + or - next to it, depending if the extra text is shown or not. I would really-really appreciate your help with this to keep the + and not add a new one.
@helisojala002 I’m not sure what exactly is causing that behavior for you. Make sure that the elements have the correct IDs, and that the questions have + at the start of the text. For example, the question should be written like “+ What are the opening hours?”
The + should be the first thing, without anything before it.
