Collapsible/Expandable Content

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

Thu Dec 15, 2016 9:05 am

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

User avatar
Robin
Events Staffer
Posts: 3161
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Thu Dec 15, 2016 11:21 am

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

User avatar
Masao
Host
Posts: 589
Joined: Thu Jun 16, 2011 12:29 am
Contact:

Thu Dec 15, 2016 12:25 pm

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.

User avatar
Laura
Posts: 518
Joined: Sun Apr 27, 2014 2:10 am
Location: Ontario, Canada
Contact:

Thu Dec 15, 2016 12:38 pm

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: 50
Joined: Fri Oct 28, 2016 11:58 pm
Contact:

Thu Dec 15, 2016 1:35 pm

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..."

User avatar
Mikari
Posts: 3249
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Thu Dec 15, 2016 2:14 pm

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
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest