<input type="radio" name="tabs" id="captainamerica" checked />
<input type="radio" name="tabs" id="thor"/>
<input type="radio" name="tabs" id="hulk" />
<input type="radio" name="tabs" id="ironman" />
<input type="radio" name="tabs" id="spiderman" />

<div class="tabs">
  <label for="captainamerica" class="tab"><span>Captain America</span></label>
  <label for="thor" class="tab"><span>Thor</span></label>
  <label for="hulk" class="tab"><span>Hulk</span></label>
  <label for="ironman" class="tab"><span>Iron Man</span></label>
  <label for="spiderman" class="tab"><span>Spider-Man</span></label>
</div>

<div class="tabsContents">
  <div class="tabsContents__content tabsContents__content--captainamerica">
    <h2>Captain America</h2>
    <p>Het alter ego van Steven Rogers (in sommige gevallen Steven Grant Rogers), is een fictieve superheld uit de strips van Marvel Comics. Tegenwoordig geeft Bucky (James Buchanan Barnes) zich uit voor Captain America en is Steve Rogers bekend als Captain Steve Rogers. Hij werd ontworpen door Joe Simon en Jack Kirby en verscheen voor het eerst in Captain America Comics #1, destijds uitgegeven door Timely Comics (het bedrijf dat uiteindelijk Marvel Comics zou worden).</p>
  </div>
  <div class="tabsContents__content tabsContents__content--thor">
    <h2>Thor</h2>
    <p>Thor (in het Nederlands ook wel De Machtige Thor genoemd) is een fictieve superheld uit de comics van Marvel Comics. Hij is gebaseerd op dondergod Thor uit de Noordse mythologie. Hij werd bedacht door Stan Lee, Larry Lieber en Jack Kirby en verscheen voor het eerst in de strip Journey into Mystery #83 (Augustus. 1962).</p>
  </div>
  <div class="tabsContents__content tabsContents__content--hulk">
    <h2>De Hulk</h2>
    <p>Alias Dr. Robert Bruce Banner is een stripfiguur in de gelijknamige comics van Marvel Comics. Hij werd gecreëerd door Stan Lee en Jack Kirby. De Hulk gaat vaak door voor een superheld, maar is in feite meer een antiheld: hij moet dan ook vaak andere helden van zich afslaan. Sinds zijn eerste verschijning in mei 1962 is de Hulk een van 's werelds herkenbaarste stripfiguren geworden. In de Nederlandse vertaling heet de strip aanvankelijk Rauwe Bonk, nadien de Verbijsterende Hulk.</p>
  </div>
  <div class="tabsContents__content tabsContents__content--ironman">
    <h2>Iron Man</h2>
    <p>Het alter ego van Anthony Edward "Tony" Stark, is een fictieve superheld uit de comics van Marvel Comics. Hij werd bedacht door Stan Lee, Larry Lieber, Don Heck en Jack Kirby en verscheen voor het eerst in Tales of Suspense #39 (Maart 1963).</p>
  </div>
  <div class="tabsContents__content tabsContents__content--spiderman">
    <h2>Spider-Man</h2>
    <p>Alias Peter Benjamin Parker, is een superheld uit de gelijknamige comicserie van Marvel Comics. Hij is het geesteskind van Stan Lee en Steve Ditko en deed zijn intrede in de stripwereld in het blad 'Amazing Fantasy #15' in 1962.</p>
  </div>
</div>
$numTabs: 5; //max number of tabs

/* tabs */
input[type="radio"] {
  position: absolute;
  display: none;
  
  @for $i from 1 through $numTabs {
    &:nth-child(#{$i}):checked ~ {
      .tabsContents .tabsContents__content:nth-child(#{$i}) {
        display: block;
      }
    }
  }
}

.tabs {
  label {
    display: inline-block;
  }  
}

.tabsContents__content {
  display: none;
}


/* Styling for the page and tabs 
 * This is not necessary for the functionality of the tabs
*/
$thor:           #5b6770;
$hulk:           #8abb00;
$ironman:        #f8b810;
$captainamerica: #007dd4;
$spiderman:      #a71814;

* {
   box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  padding: 1em;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  background: linear-gradient(135deg, rgba(163,54,47,1) 0%,rgba(50,104,151,1) 100%);
  line-height: 1.4em;
}

.tabs {
  .tab {
    position: relative;
    background: #fff;
    padding: 1em;
    transition: all ease-in-out 200ms;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    span {
      position: relative;
      z-index: 1;
    }
    
    &:after {
      content: '';
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 10px 0;
      border-color: transparent transparent transparent transparent;
      transition: all ease-in 400ms;
    }
    
    &:hover {
      cursor: pointer;
      &:after {
        border-width: 0 210px 210px 0;
        transition: all ease-in 100ms;
      }
    }
    
    &[for=thor] {
      &:after {
        border-right-color: $thor;
      }
    }
    
    &[for=hulk] {
      &:after {
        border-right-color: $hulk;
      }
    }
    
    &[for=ironman] {
      &:after {
        border-right-color: $ironman;
      }
    }
    
    &[for=captainamerica] {
      &:after {
        border-right-color: $captainamerica;
      }
    }
    
    &[for=spiderman] {
      &:after {
        border-right-color: $spiderman;
      }
    }
  }
}

.tabsContents {
  color: #fff;
  
  .tabsContents__content {
    display: block;
    padding-left: 2em;
    padding-right: 2em;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 400ms cubic-bezier(0.455,.03,.515,.955);
    &.tabsContents__content--thor {
      background: $thor;
    }

    &.tabsContents__content--hulk {
      background: $hulk;
    }

    &.tabsContents__content--ironman {
      background: $ironman;
    }

    &.tabsContents__content--captainamerica {
      background: $captainamerica;
    }

    &.tabsContents__content--spiderman {
      background: $spiderman;
    }
  }
}

input[type="radio"] { 
  @for $i from 1 through $numTabs {
    &:nth-child(#{$i}):checked ~ {
      .tabs .tab:nth-child(#{$i}) {
        color: #fff;
        &[for=thor] {
            background: $thor;
        }

        &[for=hulk] {
            background: $hulk;
        }

        &[for=ironman] {
            background: $ironman;
        }

        &[for=captainamerica] {
            background: $captainamerica;
        }

        &[for=spiderman] {
            background: $spiderman;
        }
      }
      .tabsContents .tabsContents__content:nth-child(#{$i}) {
        max-height: 500px;
        padding-top: 1em;
        padding-bottom: 1em;
        opacity: 1;
        transition: all 400ms cubic-bezier(0.455,.03,.515,.955);
      }
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.