Honey-do...
Video: In Case...

Accordions...

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. 

At work, I’ve QCd several JavaScript accordions lately and thought that might be an elegant solution. It’s all standard code for the modern web so none of my readers would have to do anything special on their end (except, maybe, not use Internet Explorer, which, let’s face it, would be me doing you a solid). 

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. 

To alleviate this concern for the time being, I poked around and figured out how to rewrite the JavaScript to force panels to close when a new one is open resulting in only one open panel at a time. This assistance came thanks to StackOverflow, a developer’s haven. 

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

7D020A9A-7820-49FC-AFEC-BE8D81324005

When you either click on the panel name or the +/- controls, the panel opens to expose all the content therein...

9C78D454-003E-4C6A-852F-F6D5CDCADE55

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.

2B7BDA82-1E4F-4BFC-8CE3-5F1064521618

[image courtesy of CNN Money]

If you’re still using IE, you need help. Help of the Chrome or Firefox variety. Now. 

Comments