Collapsible/Expandable Content

Everything related to the visual and coding aspects of websites.
Post Reply
Laura
Posts: 499
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Collapsible/Expandable Content

Post by Laura »

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
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Collapsible/Expandable Content

Post by Robin »

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 :)
~ a dream is a wish your heart makes ~
withinmyworld.org
Masao
Host
Posts: 579
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Re: Collapsible/Expandable Content

Post by Masao »

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.
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.
Laura
Posts: 499
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Re: Collapsible/Expandable Content

Post by Laura »

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.
User avatar
Fiona
Posts: 45
Joined: Fri Oct 28, 2016 11:58 pm
Contact:

Re: Collapsible/Expandable Content

Post by Fiona »

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..."
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Collapsible/Expandable Content

Post by Mikari »

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