Loading ..................

Functional CSS Tabs Re-Revisited


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. tabs
  2. css3
  3. responsive


  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. I'm having some trouble with Safari on iPad and Windows. If I remove the two scripts from the bottom (<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> and <script src="js/index.js"></script>), the tabs no longer work.

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

  7. These tabs are nearly perfect. Is there any way to adjust, or add to, the code so i can have unlimited tabs? I'm trying to add more tabs, rather than just having 4, to the selection, but when i add a 5th, i can't select any other after the 4th tab. Please let me know

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

  9. Thank you, Vesa. I had changed the tab id's, but not the for id's. It makes a big difference when you change them both!

  10. just one more thing. I don't mean to annoy you, but i have to ask if it's possible to put all the tabs at the top of the page, cos i've got more than will display at the top of the page, with the rest appearing below the entire content boxes, which means you'll have to scroll to the bottom of the page to see them.

  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.

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 40 Hearts