• 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?
 
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)
Back
Top