Start Kick - how to achieve a peculiar(yet common) expand collapse effect ?
Hello all,
Here's the thing, I can see a lot of examples with expand and collapse that start with a display:none; object and then, shows it, or the inverse. However, I've been asked to do something like this:
Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium Lorem Ipsium
Lorem Ipsium Lorem Ipsium Lorem Ipsium... [MORE INFO]
So the element (let's say, a div) is already there, and we need to show more of it, so that, when we click on MORE INFO we can see the remaining text. Once it is expanded, if we do [LESS INFO] the opposite should apply.
Expected Difficulties:
1) Some (not all) requests to expand a given div, will come from other pages so we need to pass something into the URL and then, run some sort of expandSomeDiv() onLoad? - is this something we can do? Is it how we do it?
2) The '...' at the end, should disappear once we expand the text, and should appear when we collapse. What can we use here, innerHTML and append this to the end, and remove this somehow? Or some sort of regex Expression?
3) When expanded the trigger button needs to change. Like, we have an image that says "more info" when it's collapsed, and, after we expand, that image should swap to another image telling "less info" for example.
I'm not asking for an complete solution answer but, at least, a kick to make me start.
Any help?
Thanks a lot,
Márcio