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

Solving the fixed height issue: now both tabs and the content area can be variable height. And the HTML structure remains almost exactly the same: each tab represented as complete unit of it's own instead of being split into three parts.



  1. how to prevent the page from jumping to the top when a tab is clicked? i want to utilize two groups of tabs + a header, so the tabs are found in the middle of my page. clicking any tab causes the page to jump to the top---something like the default behavior for # links maybe?

  2. @namurray Hashes target the element that have that id, so yes, it is a browser default behavior. You can prevent link default behavior with some JavaScript, with jQuery:

    $(document).on('click', 'a.my-tab-link', function(e) {

    On this pen the above isn't required and jumping won't happen as the implementation is based on hidden radio inputs.

  3. thanks for your quick response, but it is happening for me using your code. in fact it's happening on this page now, in FF or chrome. if you scroll down juuuust enough to see the very bottom of a tab, and then click one, the page will jump to the top. it doesn't happen w/ chris's code but i can't tell what the difference is that would cause it, when i strip down both.

  4. @namurray Fixed. It only happened on Chrome. There seems to be a difference in how position: fixed; and bottom: 100%; are interpreted. I changed the code a bit so that Chrome seems to be happy for now. Will need more testing with other browsers though.

  5. Perfect. Thank you!

  6. I'm having some trouble with Safari on iPad and Windows. If I remove the two scripts from the bottom (and), the tabs no longer work.

  7. @twheel: fixed, Safari had issues with consecutive + selectors, using ~ instead selected the correct element.

  8. Thank you so very, very much!

  9. Nice! Thanks for this.

  10. @InfinityCoder: make sure id and for attributes are unique for each tab.

  11. @InfinityCoder You should reconsider whether tabs are a good solution for what you're doing. Tabs in two or more rows isn't good, scrolling tabs horizontally is no better. I don't know what you're doing, but a dropdown menu could be better or maybe simple previous / next listing, or even just scrolling everything vertically.

    If the problem is only in mobile then switching to accordion style could also work, although making it work flawlessly may require some work via JavaScript.

    Essentially the problem you have is more a design / usability issue than a technical issue with tabs. If you have so many tabs that they wrap to multiple lines then you simply have too many tabs.

  12. saved my current job, thank you so much!

  13. Excellent. Just letting you know I created a fork (http://codepen.io/jonafrica/pen/dMxQBK) with just enough javascript to close Accordion. While I hate to "break" the css-only approach (which is quite impressive), I need users to close long tabs to see others on a small device.

  14. For those interested on a modern take on this using React: https://github.com/Merri/react-tabbordion

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

You must be logged in to comment.