Expand and collapse info by header or image

Help and Tips on How and Where to Advertise Your Products, Product Page and Homepage Coding to Showcase Your Wears.
Post Reply
User avatar
Elaini
Prolific Pixel
Posts: 168
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Expand and collapse info by header or image

Post by Elaini » Sun Oct 22, 2017 1:48 pm

I have a lot of information in my web profiles... no doubt it's tl;dr for many visitors but I still want to keep that information just in case someone gets interested and bothers to read it, and keep it as well organized, too. I do intend to keep my profiles as the center point of my IMVU activities, after all.

So I'm looking for a simple script that toggles the <div> below as visible or invisible simply by clicking a link above, either in a form of a header or an image. If the link and div are similarly titled in code, the script would link them somehow... or however it works.

An example in point...

If the script has an effect to it that slides it open or closed, all the better.
Image

User avatar
Nums
Sage Pixel
Posts: 21
Joined: Wed Mar 01, 2017 3:43 pm

Re: Expand and collapse info by header or image

Post by Nums » Tue Oct 24, 2017 12:13 pm

You mean like a show/hide button ?

Like how I did on my page

http://www.imvu.com/shop/product.php?pr ... d=38769282

User avatar
gaf210
Prolific Pixel
Posts: 127
Joined: Sat Feb 25, 2017 10:27 am
Location: Argentina
IMVU Homepage: http://avatars.imvu.com/gaf210
Contact:

Re: Expand and collapse info by header or image

Post by gaf210 » Tue Oct 24, 2017 7:49 pm

Made a quick little code to do just as you asked here:

http://filedrive.imvustylez.net/file/1508899704

Feel free to tweak around ^^

TIP: change the 'slow' for 'fast' if you want the toggle to be quicker ^^

User avatar
Elaini
Prolific Pixel
Posts: 168
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Re: Expand and collapse info by header or image

Post by Elaini » Wed Oct 25, 2017 1:45 am

That's perfect, thanks Gaf. :D
Image

User avatar
gaf210
Prolific Pixel
Posts: 127
Joined: Sat Feb 25, 2017 10:27 am
Location: Argentina
IMVU Homepage: http://avatars.imvu.com/gaf210
Contact:

Re: Expand and collapse info by header or image

Post by gaf210 » Wed Oct 25, 2017 1:58 pm

wooot! let me know if you need any help setting the code up :)

User avatar
Elaini
Prolific Pixel
Posts: 168
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Re: Expand and collapse info by header or image

Post by Elaini » Thu Oct 26, 2017 6:53 pm

gaf210 wrote:
Wed Oct 25, 2017 1:58 pm
wooot! let me know if you need any help setting the code up :)
I understood it. :) It's heavily used on all of my profiles now. They're not fully revamped yet with some newer graphics missing, but at least the mechanics are now working perfectly... so thanks again.
Image

User avatar
gaf210
Prolific Pixel
Posts: 127
Joined: Sat Feb 25, 2017 10:27 am
Location: Argentina
IMVU Homepage: http://avatars.imvu.com/gaf210
Contact:

Re: Expand and collapse info by header or image

Post by gaf210 » Thu Oct 26, 2017 7:34 pm

woah! i love how you styled the links and how you even nested them one into the other... you can really code hun! Love the feel of the page too... you really caught that Lord of the Rings elvish look :) Congrats!!

User avatar
Elaini
Prolific Pixel
Posts: 168
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Re: Expand and collapse info by header or image

Post by Elaini » Fri Oct 27, 2017 4:34 am

gaf210 wrote:
Thu Oct 26, 2017 7:34 pm
woah! i love how you styled the links and how you even nested them one into the other... you can really code hun! Love the feel of the page too... you really caught that Lord of the Rings elvish look :) Congrats!!
Thank you... Well, it's a themed account. I didn't want to just snatch the name and then make it something random, so I make sure that it also honors the character. I'll make the background lighter later...
Image

User avatar
Nums
Sage Pixel
Posts: 21
Joined: Wed Mar 01, 2017 3:43 pm

Re: Expand and collapse info by header or image

Post by Nums » Sat Oct 28, 2017 11:02 am

Wow, that drop down looks so professional. You wouldn't happen to mind if I used that code, would you? Puts my noob coding to shame.

User avatar
Elaini
Prolific Pixel
Posts: 168
Joined: Sat Mar 25, 2017 4:05 pm
Location: Finland
IMVU Homepage: http://avatars.imvu.com/Elaini
Contact:

Re: Expand and collapse info by header or image

Post by Elaini » Sun Oct 29, 2017 6:13 am

Nums wrote:
Sat Oct 28, 2017 11:02 am
Wow, that drop down looks so professional. You wouldn't happen to mind if I used that code, would you? Puts my noob coding to shame.
It's Gaf's, up to him. :)
Image

User avatar
gaf210
Prolific Pixel
Posts: 127
Joined: Sat Feb 25, 2017 10:27 am
Location: Argentina
IMVU Homepage: http://avatars.imvu.com/gaf210
Contact:

Re: Expand and collapse info by header or image

Post by gaf210 » Sun Oct 29, 2017 5:04 pm

Nums wrote:
Sat Oct 28, 2017 11:02 am
Wow, that drop down looks so professional. You wouldn't happen to mind if I used that code, would you? Puts my noob coding to shame.
Hehee of course theres no probs buddy! Its there for anyone that wants to use it.

Btw imvu homepages already include jquery so that first line of code can be ignored :)

Post Reply