+- HELOVIA || The Way to the Sun (http://helovia.com)
+-- Forum: Out of Character (http://helovia.com/forumdisplay.php?fid=1)
+--- Forum: Player Resources (http://helovia.com/forumdisplay.php?fid=99)
+---- Forum: Growth Center (http://helovia.com/forumdisplay.php?fid=82)
+---- Thread: !! Help? Forum Collapsable Code (/showthread.php?tid=14907)
!! Help? Forum Collapsable Code - Abba - 07-15-2014
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.
RE: !! Help? Forum Collapsable Code - Sevin - 07-15-2014
This is what you want to show before expanding
This is where you put the details that are shown once expandedThis 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
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
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.
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
Since our panels run with java, they should not be used on the regular boards!
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
But you could always just use the styling css tag "panel" for the styling..
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
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.
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
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
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
Thank you Tamme <3
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
I think switching "display: block" to "display: inline" will make them rows, but I am not 100%
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
I'll fiddle with it when I get home. Thank you!
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
<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>
- Question 1
Answer 1 - Question 2
Answer 2 - Question 3
Answer 3 - Question 4
Answer 4 - Question 5
Answer 5 - Question 6
Answer 6
^^ 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..
RE: !! Help? Forum Collapsable Code - Sevin - 07-15-2014
Oh, didn't know those tags didn't run on other browsers. Who uses anything besides Chrome anyways ;)
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
|: I've tried like 10 different ones, and none of them work here...
List of tried below that I could find agan:
RE: !! Help? Forum Collapsable Code - Tamme - 07-15-2014
Lemme load the css into my global set tonight and test them
RE: !! Help? Forum Collapsable Code - Abba - 07-15-2014
^^ Thank you Tamme, sorry if I'm being a pain ._.
RE: !! Help? Forum Collapsable Code - Abba - 07-17-2014
@[Tamme] - Just checking to see if you've had a chance/if they work yet. Anxious to try and implement it :P
RE: !! Help? Forum Collapsable Code - Mauja - 07-21-2014
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>