cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Single breakpoint

This Pen is a fork of Stuart Robson's Pen Responsive Accordion to Tabs.


  1. Really nice Javascript Chris! :D

  2. If I try to use the tabs in FF (Mac) the tabs vanish. Is this a problem with your JS or a general Codepen-problem? I recognized, that Codepen has its flaws in Firefox, unfortunately.

  3. @jensgro Fixed that issue. Wasn't passing in the event to the click event callback properly.

  4. Chris, You rock! CSS-tricks.com has been a godsend to me.

  5. @chriscoyier I will not be happy with myself until I write CSS and JS that is as elegant and organized as this.

  6. Thanks very much for this @chriscoyier I'm not a smart man, it took me a little while to realize why it didn't look the same when I used a small unordered list in place of the paragraph. I added width 100% to .nav section.is-open to keep the containers equal size. Very cool how it's set up with flexible widths from the start. Thanks again.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.