Amassment Message Board

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

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 :)

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.

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.

I'm not sure if this one would be of any help but it uses HTML5 and CSS.

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"; } }