CSS only tabs. NO additional markup needed

In this example below you will see how to do a CSS only tabs. NO additional markup needed with some HTML / CSS and Javascript

HEUREKA!

Thumbnail
This awesome code was written by franzskuffka, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright franzskuffka ©
  • HTML
  • CSS
  • JavaScript
    .tabgroup
  button Hello
  button Pretty
  button World
  .tabgroup-content
    .tab-content You
    .tab-content Are
    .tab-content Beautiful

/*Downloaded from https://www.codeseek.co/franzskuffka/css-only-tabs-no-additional-markup-needed-RNzbzr */
    @import "nib"

.tab-content
  text-align center
  line-height 100px
  height 0
  width 100% //state 1
  overflow hidden
  transition all 0.1 ease-out
  transition-delay 9999s //trick part 1
  background black
  position absolute
  color white
  for i in 1 .. 10
    button:nth-child({i}):active ~ .tabgroup-content &:nth-child({i})
      height 100% //state2
  button:active ~ .tabgroup-content &
    transition none         //trick part 2
button
  padding 20px
  border none


/*Downloaded from https://www.codeseek.co/franzskuffka/css-only-tabs-no-additional-markup-needed-RNzbzr */
    

Comments