the Rift


!! Help? Forum Collapsable Code

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#1
So, on the profile we have the panels.
On the profiles you use:
Code:
<div class="panel">Name<div class="panelcontent">content here</div></div>

^^ which will give you the site's collapsible panels. Is there a way to get it to work for the forums?
I want to add it to my massive herb list so the name can be the panel and then they can click that panel to read all the information instead of all the scrolling and scrolling and scrolling they have to do atm. I feel like it would really clean up the list, especially since I have over 50 different herb types atm |: Like, really, it's insane. And I'm not done adding stuff in 'cause Nickel gave me stuff to add and i'm not finished with her massive list yet.

Collapsable panels would just be... baws. Before I get any farther and want to shoot myself for having to move it all over. The scrolling just pisses me off XD

What are you afraid of? 'Cause it can't be that bad
Being friends, beneficial ties

Sevin the Sucky, I mean are you a # or vacuum? Posts: 161
OOC Account
Mare :: Other :: 5'5" :: 25
Sevin
#2
This is what you want to show before expandingThis is where you put the details that are shown once expanded
This is what you want to show before expanding
This is where you put the details that are shown once expanded
This is what you want to show before expanding
This is where you put the details that are shown once expanded


Code:
<div style="background: #ffffff;"><details><summary>This is what you want to show before expanding</summary>This is where you put the details that are shown once expanded</details></div>
<div style="background: #000000;"><details><summary>This is what you want to show before expanding</summary>
This is where you put the details that are shown once expanded</details></div>
<div style="background: #ffffff;"><details><summary>This is what you want to show before expanding</summary>
This is where you put the details that are shown once expanded</details></div>


You can see the difference between the top line, where I didn't put a break between summary and details, and the bottom two, where I did.
Obviously the div's could be styled better ;)

This is different from the site collapsible stuff, but it is one option :D

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#3
Yay for options :P
Though Id really like it to match the site layout so i dont have to worry about changing colours, and the rest of the list is all plain/with the site stuff.

What are you afraid of? 'Cause it can't be that bad
Being friends, beneficial ties

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#4
Since our panels run with java, they should not be used on the regular boards!

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#5
But you could always just use the styling css tag "panel" for the styling..

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#6
The other thing about Sevin's "Summary" is that it won't work on all browsers, so internet explorer and firefox users wouldn't see it as an expand/collapse. Lemme see if this can be done with only CSS.

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#7
Mkay, try working with this:
http://jsfiddle.net/ionko22/4sKD3/
It's a purely CSS based hide/show command. You would jsut have to align and style it how you want

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#8
Thank you Tamme <3

What are you afraid of? 'Cause it can't be that bad
Being friends, beneficial ties

Tamme the Tempting Posts: 140
Administrator
Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
Tamme
#9
I think switching "display: block" to "display: inline" will make them rows, but I am not 100%

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#10
I'll fiddle with it when I get home. Thank you!

What are you afraid of? 'Cause it can't be that bad
Being friends, beneficial ties

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#11
<style type="text/css">
.faq {

}

.faq ul {

}

.faq ul li {
display:block;
float:left;
padding:5px;
}

.faq ul li div {
display:none;
}

.faq ul li div:target {
display:block;
}
</style>


^^ That's what I got when I just copied it in - except it doesn't collapse/show/hide @[Tamme] - Imma search for some other pure CSS codes too but IDK why it didn't work..

What are you afraid of? 'Cause it can't be that bad
Being friends, beneficial ties

Sevin the Sucky, I mean are you a # or vacuum? Posts: 161
OOC Account
Mare :: Other :: 5'5" :: 25
Sevin
#12
Oh, didn't know those tags didn't run on other browsers. Who uses anything besides Chrome anyways ;)

Abba Posts: 13
OOC Account
Mare :: Other :: 5'2 :: 20 years
Abba
#13
|: I've tried like 10 different ones, and none of them work here...

List of tried below that I could find agan:
  • http://jsfiddle.net/paullferguson/Sv54G/3/
  • http://jsfiddle.net/w5zev/2/
  • http://jsfiddle.net/Wolfy87/Z4Mr3/ <- I really liked this one but it didn't work
  • http://leslievarghese.com/click-events-using-pure-css/
  • http://codepen.io/arildrotmo/details/agGfi
  • http://codepen.io/dudleystorey/pen/tjzcm

  • What are you afraid of? 'Cause it can't be that bad
    Being friends, beneficial ties

    Tamme the Tempting Posts: 140
    Administrator
    Mare :: Other :: 2 :: 2 HP: 9001 | Buff: Admin
    Tamme
    #14
    Lemme load the css into my global set tonight and test them

    Abba Posts: 13
    OOC Account
    Mare :: Other :: 5'2 :: 20 years
    Abba
    #15
    ^^ Thank you Tamme, sorry if I'm being a pain ._.

    What are you afraid of? 'Cause it can't be that bad
    Being friends, beneficial ties

    Abba Posts: 13
    OOC Account
    Mare :: Other :: 5'2 :: 20 years
    Abba
    #16
    @[Tamme] - Just checking to see if you've had a chance/if they work yet. Anxious to try and implement it :P

    What are you afraid of? 'Cause it can't be that bad
    Being friends, beneficial ties
    Ascended Helovian

    Mauja the Frozen Light Posts: 1,392
    Outcast atk: 6.5 | def: 10.5 | dam: 7.5
    Stallion :: Unicorn :: 17.2 :: 14 HP: 79.5 | Buff: HUNTER
    Irma :: Snowy Owl :: Terrorize & Diego :: Eurasian Eagle-Owl :: Rage Neo
    #17
    Actually, it's not biggie to tack the JavaScript onto the global, because pure js doesn't conflict with Prototype.

    Buuut lessee.

    Herb heading.
    Herb content, I be hidden, man.

    Herb heading. 2
    Herb content, I be hidden, man. 2

    Herb heading. 3
    Herb content, I be hidden, man. 3

    Anyway, this is a bit of jQuery made just for you, and I don't think it conflicts anywhere? (Because I finally nailed the NoConflict for MyBB a few weeks ago) The Java dropdown menus (Quick Edit/Full Edit) still seem to work, which is the easiest way to see if you've broken anything.

    Just operates like this:

    Code:
    <div class="herbalicious">Header</div>
    <div class="herbalicious-bit">Content</div>
    angels, they fell first, but I'm still here


    Forum Jump:


    RPGfix Equi-venture