In case you were wondering yesterday what I meant by “Implement Rankings accordion” on my honey-do list, and since they’re now successfully implemented, how about I give you a little background.
As you know, occasionally I rank things. Related things. And I make a post about it. I’ve done four rankings here so far and decided a while back to create a page where I can post the most recent copy of each list (they change, as is life).
Even without including my rationale behind rankings, that page was getting wayyyyyy too long. So I set about finding a design solution to clean things up.
I did some research and found a simple design I liked on w3schools.com. I tried it out and liked it but having multiple accordion panels open at once (you had to actively close them when you were done) was causing content to run off the bottom edge of my screen. I’m guessing this is a freakish limitation of my responsive template and may look into it further down the line.
I cobbled it all together and added some styling to the accordion to create the +/- button controls on the side and this is what I now have (these are screen captures; you can’t click them)...
When you either click on the panel name or the +/- controls, the panel opens to expose all the content therein...
I’m pretty happy with it. I can think of other pages where this might work nicely as well, but for now, just on Rankings.
Let me know if it works for you. If it doesn’t, let me know what OS you’re on and what browser you’re using. Unless it’s Internet Explorer.
[image courtesy of CNN Money]