I'm looking for the easiest way to create collapsible/expandable divs for content without having to resort to using bootstrap or installing scripts or anything. I'd prefer to use CSS only but I'm not sure if that's even possible? Basically, I just want to keep my code simplistic for my own sake without having to go and learn a whole lot of complicated stuff. I'm not exactly code savvy these days. Javascript would be alright too. (I do make use of it at Dramata.org but I didn't actually implement it, Zee did. Worst case I'll use that but I'd like to kinda figure it out myself too? idk)
I want to use it for my One Piece site mainly. I have a section for story summaries where I've broken down the story by arc... it's a bit overwhelming and full of spoilers, so I want all the story arcs to be collapsed on page load. The viewer can then click on each one to expand it and read the detailed summary.
Any help is welcome; if there's already a thread here about it, just point me toward that and I'm good. xD Thanks. <3
Collapsible/Expandable Content
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Collapsible/Expandable Content
Hey, I think the following code will work for you! I learned it from Lethe (she uses it on her Dream Saga site a lot, as seen here) and implemented it on my domain (click "colleagues," "joined," and "featured" to see it in action). Original source is this page at DynamicDrive.com, and it's got a decent explanation of all the steps needed to implement it :)
Re: Collapsible/Expandable Content
If you just want CSS, there's the radio/checkbox :checked method.
Article (plus the A List Apart full article linked)
the Codepen - the js is optional for older browsers
Another article
the Codepen
If you want more than one content to show up at once, switch from radio boxes to check boxes. And if you'd like it to animate, use css transitions.
Article (plus the A List Apart full article linked)
the Codepen - the js is optional for older browsers
Another article
the Codepen
If you want more than one content to show up at once, switch from radio boxes to check boxes. And if you'd like it to animate, use css transitions.
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.
Re: Collapsible/Expandable Content
I guess the issue with the examples given so far is that they all feature horizontal navigation where I want vertical navigation. But if I can switch from radio boxes to check boxes, Masao, I might try to fiddle around with your method. :) I like A List Apart, not sure why I didn't think to look there. Thanks!! I'll let you guys know how it goes.
- Laura
Genrou.com, Dramata.org & All-Blue.org
Genrou.com, Dramata.org & All-Blue.org
Re: Collapsible/Expandable Content
I'm not sure if this one would be of any help but it uses HTML5 and CSS.
"Spread your wings in the stormy winds..."
Re: Collapsible/Expandable Content
Here's another option with a pretty short JS function.
showtext() { if (document.getElementById("spoiler").style.visibility == "hidden") { document.getElementById("spoiler").style.visibility = "visible"; document.getElementById("showhidetext").innerHTML = "Hide"; } else { document.getElementById("spoiler").style.visibility = "hidden"; document.getElementById("showhidetext").innerHTML = "Show"; } }
showtext() { if (document.getElementById("spoiler").style.visibility == "hidden") { document.getElementById("spoiler").style.visibility = "visible"; document.getElementById("showhidetext").innerHTML = "Hide"; } else { document.getElementById("spoiler").style.visibility = "hidden"; document.getElementById("showhidetext").innerHTML = "Show"; } }