• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Accordion help

youngkyun

youngkyun

sad but rad
I've been trying forever and I can't figure out how to make the accordions with the pictures that slide down when you click on them.

Anybody know how?
 
i do, it's kinda complicated though.
 
The way I did it my original implementation (which others may have improved on since then - I never revisited it) was to make the second slide title cover up the first slide and to position the content of the first slide so that it would appear even when the tab wasn't open; the associated BBXML can be found in my repository.

With BBCode+, however, you could achieve the same effect in a much simpler way using slideDown and slideUp.
 
Lyro said:
The way I did it my original implementation (which others may have improved on since then - I never revisited it) was to make the second slide title cover up the first slide and to position the content of the first slide so that it would appear even when the tab wasn't open; the associated BBXML can be found in my repository.

With BBCode+, however, you could achieve the same effect in a much simpler way using slideDown and slideUp.
Click to expand...
How would i do it with the BBcode+?
 
I imagine it would go something like this, but it's not quite working for me as the image just blinks out of existence rather than sliding.

[div class=imageSlideHolder][div class=image][/div][div class=text]Lorem ipsum I need to copy pasta this[/div][/div] [class name=imageSlideHolder] max-width: 500px; min-height: 500px; max-height: 500px; margin: auto; color: #5e5e5e; overflow: hidden; border: 1px solid #5e5e5e; [/class] [class name=image] background: url(https://orig00.deviantart.net/de56/f/2015/033/1/4/88___a_f_t_e_r___f_o_r_e_v_e_r__by_vashperado-d8gh0gg.jpg) no-repeat; background-size: 500px auto; background-position: top-center; min-height: 500px; max-height: 500px; cursor: pointer; transition-duration: 500ms; position: relative; z-index: 2; [/class] [class name=image state=hover] filter: grayscale(50%); [/class] [class name=text] background: #fcfcfc; min-height: 500px; max-height: 500px; padding: 20px; position: relative; z-index: 1; [/class] [script class=text] hide [/script] [script class=image on=click] slideUp 500 image slideDown 1500 text [/script]

Code: 
[div class=imageSlideHolder][div class=image][/div][div class=text]Lorem ipsum I need to copy pasta this[/div][/div][nobr]

[class name=imageSlideHolder]
max-width: 500px;
min-height: 500px;
max-height: 500px;
margin: auto;
color: #5e5e5e;
overflow: hidden;
border: 1px solid #5e5e5e;
[/class]

[class name=image]
background: url(https://orig00.deviantart.net/de56/f/2015/033/1/4/88___a_f_t_e_r___f_o_r_e_v_e_r__by_vashperado-d8gh0gg.jpg) no-repeat;
background-size: 500px auto;
background-position: top-center;
min-height: 500px;
max-height: 500px;
cursor: pointer;
transition-duration: 500ms;
position: relative;
z-index: 2;
[/class]

[class name=image state=hover]
filter: grayscale(50%);
[/class]

[class name=text]
background: #fcfcfc;
min-height: 500px;
max-height: 500px;
padding: 20px;
position: relative;
z-index: 1;
[/class]

[script class=text]
hide
[/script]

[script class=image on=click]
slideUp 500 image
slideDown 1500 text
[/script]
[/nobr]
 
Yeah, that with a slide. Hmm
Amerikia1126 said:
I imagine it would go something like this, but it's not quite working for me as the image just blinks out of existence rather than sliding.

[div class=imageSlideHolder][div class=image][/div][div class=text]Lorem ipsum I need to copy pasta this[/div][/div] [class name=imageSlideHolder] max-width: 500px; min-height: 500px; max-height: 500px; margin: auto; color: #5e5e5e; overflow: hidden; border: 1px solid #5e5e5e; [/class] [class name=image] background: url(https://orig00.deviantart.net/de56/f/2015/033/1/4/88___a_f_t_e_r___f_o_r_e_v_e_r__by_vashperado-d8gh0gg.jpg) no-repeat; background-size: 500px auto; background-position: top-center; min-height: 500px; max-height: 500px; cursor: pointer; transition-duration: 500ms; position: relative; z-index: 2; [/class] [class name=image state=hover] filter: grayscale(50%); [/class] [class name=text] background: #fcfcfc; min-height: 500px; max-height: 500px; padding: 20px; position: relative; z-index: 1; [/class] [script class=text] hide [/script] [script class=image on=click] slideUp 500 image slideDown 1500 text [/script]

Code: 
[div class=imageSlideHolder][div class=image][/div][div class=text]Lorem ipsum I need to copy pasta this[/div][/div][nobr]

[class name=imageSlideHolder]
max-width: 500px;
min-height: 500px;
max-height: 500px;
margin: auto;
color: #5e5e5e;
overflow: hidden;
border: 1px solid #5e5e5e;
[/class]

[class name=image]
background: url(https://orig00.deviantart.net/de56/f/2015/033/1/4/88___a_f_t_e_r___f_o_r_e_v_e_r__by_vashperado-d8gh0gg.jpg) no-repeat;
background-size: 500px auto;
background-position: top-center;
min-height: 500px;
max-height: 500px;
cursor: pointer;
transition-duration: 500ms;
position: relative;
z-index: 2;
[/class]

[class name=image state=hover]
filter: grayscale(50%);
[/class]

[class name=text]
background: #fcfcfc;
min-height: 500px;
max-height: 500px;
padding: 20px;
position: relative;
z-index: 1;
[/class]

[script class=text]
hide
[/script]

[script class=image on=click]
slideUp 500 image
slideDown 1500 text
[/script]
[/nobr]
Click to expand...
 
Here's one way to do it. Not the most elegant way, but it gets the job done (click on the image or the text beneath to make it slide):

[class=container] cursor: pointer; display: inline-block; position: relative; transform: scaleY(-1); [/class] [class=cover] background-image: url(http://hollowknight.com/wp-content/uploads/2015/08/Grimm_troupe_screen_v03.jpg); background-repeat: no-repeat; bottom: 0; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(-1); [/class] [class=content] height: 450px; transform: scaleY(-1); width: 800px; [/class] [script class=content on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container] [div class=content] Some words... [/div] [div class=cover] [/div] [/div]

Code: 
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
[/class]

[class=cover]
  background-image: url(http://hollowknight.com/wp-content/uploads/2015/08/Grimm_troupe_screen_v03.jpg);
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 800px;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
    Some words...
  [/div]
  [div class=cover]
  [/div]
[/div]
[/nobr]

This could also probably be done with CSS transitions and addClass/removeClass.
 
Oh okay! I see now, thank you!
Lyro said:
Here's one way to do it. Not the most elegant way, but it gets the job done (click on the image or the text beneath to make it slide):

[class=container] cursor: pointer; display: inline-block; position: relative; transform: scaleY(-1); [/class] [class=cover] background-image: url(http://hollowknight.com/wp-content/uploads/2015/08/Grimm_troupe_screen_v03.jpg); background-repeat: no-repeat; bottom: 0; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(-1); [/class] [class=content] height: 450px; transform: scaleY(-1); width: 800px; [/class] [script class=content on=click] slideDown 800 cover [/script] [script class=cover on=click] slideUp 800 [/script] [div class=container] [div class=content] Some words... [/div] [div class=cover] [/div] [/div]

Code: 
[nobr]
[class=container]
  cursor: pointer;
  display: inline-block;
  position: relative;
  transform: scaleY(-1);
[/class]

[class=cover]
  background-image: url(http://hollowknight.com/wp-content/uploads/2015/08/Grimm_troupe_screen_v03.jpg);
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(-1);
[/class]

[class=content]
  height: 450px;
  transform: scaleY(-1);
  width: 800px;
[/class]

[script class=content on=click]
  slideDown 800 cover
[/script]

[script class=cover on=click]
  slideUp 800
[/script]

[div class=container]
  [div class=content]
    Some words...
  [/div]
  [div class=cover]
  [/div]
[/div]
[/nobr]

This could also probably be done with CSS transitions and addClass/removeClass.
Click to expand...
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Uxie
Tutorial ๐šŒ๐š›๐šŠ๐šœ๐š‘ ๐šŒ๐š˜๐šž๐š›๐šœ๐šŽ ๐Ÿ’ฅ โ€” a guide
Replies
3
Views
134
Uxie
Uxie
Alteras
Resource Text Templater โ€” a plain text template to form field generator
Replies
3
Views
269
A Murder Of Corviknight
A Murder Of Corviknight
Back
Top