A Pen by JustAnotherCoder.

CSS3-Tabbed-Content.markdown

CSS3 Tabbed Content

Tabbed content made using only CSS.

A Pen by JustAnotherCoder on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic' rel='stylesheet'>

<div class="tabs color3 stack effect8 tleft">
	<!--TAB 1-->
	<input type="radio" name="tabs" checked id="tab1" class="content1">
  <label for="tab1" style='border-left: 0'>
    <span>
      <span><div class="fa fa-bolt"></div>
        Electricity
      </span>
    </span>
  </label>
  <!--TAB 2-->
	<input type="radio" name="tabs" id="tab2" class="content2">
	<label for="tab2">
    <span>
      <span><div class="fa fa-picture-o"></div>
        da Vinci
      </span>
    </span>
  </label>
  <!--TAB 3-->
	<input type="radio" name="tabs" id="tab3" class="content3">
	<label for="tab3">
    <span>
      <span><div class="fa fa-compass"></div>
        The Compass
      </span>
    </span>
  </label>
  <!--TAB 4-->
	<input type="radio" name="tabs" id="tab4" class="content4">
	<label for="tab4">
    <span><span><div class="fa fa-apple"></div>
      Apple Inc.
      </span>
    </span>
  </label>
  
  <!--CONTENT-->
  <ul>
    <!--TAB 1-->
    <li class="content1">
      <div>
	  		  <h1>Summary</h1>
          <p>
Electricity is the set of physical phenomena associated with the presence and flow of electric charge. Electricity gives a wide variety of well-known effects, such as lightning, static electricity, electromagnetic induction and electrical current. In addition, electricity permits the creation and reception of electromagnetic radiation such as radio waves.
        </p>
        <p class='cite'>
          Wikipedia
        </p>
      </div>
    </li>
    <!--TAB 2-->
    <li class="content2">
      <div>
	  		  <h1>Summary</h1>
        <p>
Leonardo da Vinci was an Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.
        </p>
        <p class='cite'>
          Wikipedia
        </p>
      </div>
    </li>
    <!--TAB 3-->
    <li class="content3">
      <div>
	  		  <h1>Summary</h1>
      <p>
        A compass is a navigational instrument that shows directions in a frame of reference that is stationary relative to the surface of the earth. The frame of reference defines the four cardinal directions (or points) north, south, east, and west. Intermediate directions are also defined. Usually, a diagram called a compass rose, which shows the directions (with their names usually abbreviated to initials), is marked on the compass. When the compass is in use, the rose is aligned with the real directions in the frame of reference, so, for example, the "N" mark on the rose really points to the north. Frequently, in addition to the rose or sometimes instead of it, angle markings in degrees are shown on the compass. North corresponds to zero degrees, and the angles increase clockwise, so east is 90 degrees, south is 180, and west is 270. These numbers allow the compass to show azimuths or bearings, which are commonly stated in this notation.
      </p>
        <p class='cite'>
          Wikipedia
        </p>
      </div>
    </li>
    <!--TAB 4-->
    <li class="content4">
      <div>
	  		  <h1>Summary</h1>
      <p>
Apple Inc. is an American multinational corporation headquartered in Cupertino, California, that designs, develops, and sells consumer electronics, computer software and personal computers. Its best-known hardware products are the Mac line of computers, the iPod media player, the iPhone smartphone, and the iPad tablet computer. Its consumer software includes the OS X and iOS operating systems, the iTunes media browser, the Safari web browser, and the iLife and iWork creativity and productivity suites.
      </p>
        <p>
          Apple was founded by Steve Jobs, Steve Wozniak, and Ronald Wayne on April 1, 1976 to develop and sell personal computers. It was incorporated as Apple Computer, Inc. on January 3, 1977, and was renamed as Apple Inc. on January 9, 2007 to reflect its shifted focus towards consumer electronics.
        </p>
        <p class='cite'>
          Wikipedia
        </p>
      </div>
    </li>					
  </ul>
</div>

script.js

// CSS3 TABBED CONTENT

/* BROWSER COMPATILITY
--INTERNET EXPLORER 9+ (CAN'T CHANGE TABS IE8)
--GOOGLE CHROME
--MOZILLA FIREFOX
--OPERA
--SAFARI
*/

/* 
OTHER THINGS I MADE
http://codepen.io/collection/HduGy
*/

style.css

* { margin: 0; padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}

body {
	padding: 40px;
	overflow-x: hidden;
	background: #222
}

.tabs {
	position: relative;
	font: normal normal 400 0 
    'Electrolize', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff
}

.tabs input {display: none}

.tabs label {
	position: relative;
	z-index: 1;
	display: inline-block;
	text-align: left;
	width: 25%;
	border: 1px solid #222;
	border-left-color: #555;
	font-size: 17px;
	line-height: 45px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none
}

.tabs label span {
	display: block;
	padding: 5px;
	background: #444
}

.tabs label span span {
	padding: 0 20px;
	background: transparent;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	transition: background 0.4s
}

.tabs input:checked + label {cursor: default}


.tabs ul {
	list-style: none;
	position: relative;
	display: block;
	font: normal normal 400 15px 
    'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif
}

.tabs ul li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: auto;
	padding: 25px;
	background: #444;
	opacity: 0;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	border: 1px solid #666;
}

.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4 {
  /* ADD MORE AS NEEDED */
	position: relative;
	z-index: 1;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	transform: none
}

/* FONTAWESOME */
.fa { margin-right: 10px; font-size: 20px }

/** COLORS **/

/* DEFAULT */
.color1 label:hover span span, .tabs label:hover span span {background: #232323}
.color1 input:checked + label span span, .tabs input:checked + label span span {background: #232323}

/* BLUE */
.color2 label:hover span span {background: #39a1dd}
.color2 input:checked + label span span {background: #39a1dd}

/* RED */
.color3 label:hover span span {background: #cc0f16}
.color3 input:checked + label span span {background: #cc0f16}

/* GREEN */
.color4 label:hover span span {background: #699b67}
.color4 input:checked + label span span {background: #699b67}

/* PURPLE */
.color5 label:hover span span {background: #a086d3}
.color5 input:checked + label span span {background: #a086d3}

/* ORANGE */
.color6 label:hover span span {background: #ed812b}
.color6 input:checked + label span span {background: #ed812b}

/* YELLOW */
.color7 label:hover span span {background: #e5b742}
.color7 input:checked + label span span {background: #e5b742}

/* SILVER */
.color8 label:hover span span {background: #888}
.color8 input:checked + label span span {background: #888}

/* SALMON */
.color9 label:hover span span {background: #fa8072}
.color9 input:checked + label span span {background: #fa8072}
/** END COLORS **/

/*** POSIITONS ***/

/* LEFT */
.tleft { text-align: left }
.tleft label { width: auto }

/* CENTER */
.tcenter { text-align: center }
.tcenter label { width: auto }

/* RIGHT */
.tright { text-align: right }
.tright label { width: auto }

/*** END POSITIONS ***/

/* EFFECTS */
.effect1 ul li {
	-webkit-transform: translateY(30px); 
	-moz-transform: translateY(30px); 
	-o-transform: translateY(30px);
	transform: translateY(30px)
}
.effect2 ul li {
	-webkit-transform: translateX(30px); 
	-moz-transform: translateX(30px); 
	-o-transform: translateX(30px);
	transform: translateX(30px)
}
.effect3 ul li {
	-webkit-transform: translate(30px, 30px); 
	-moz-transform: translate(30px, 30px); 
	-o-transform: translate(30px, 30px);
	transform: translate(30px, 30px)
}
.effect4 ul li {
	-webkit-transform: translateY(-30px); 
	-moz-transform: translateY(-30px); 
	-o-transform: translateY(-30px);
	transform: translateY(-30px)
}
.effect5 ul li {
	-webkit-transform: translateX(-30px); 
	-moz-transform: translateX(-30px); 
	-o-transform: translateX(-30px);
	transform: translateX(-30px)
}
.effect6 ul li {
	-webkit-transform: translate(-30px, -30px); 
	-moz-transform: translate(-30px, -30px); 
	-o-transform: translate(-30px, -30px);
	transform: translate(-30px, -30px)
}
.effect7 ul li {
	-webkit-transform: translate(30px, -30px); 
	-moz-transform: translate(30px, -30px); 
	-o-transform: translate(30px, -30px);
	transform: translate(30px, -30px)
}
.effect8 ul li {
	-webkit-transform: translate(-30px, 30px); 
	-moz-transform: translate(-30px, 30px); 
	-o-transform: translate(-30px, 30px);
	transform: translate(-30px, 30px)
}
/* END EFFECTS */

/* RESPONSIVENESS 1 - NO ICONS */
@media screen and (max-width: 880px) {
  .icon label {
	  font-size: 0;
	  width: auto}
	  
  .icon .fa { 
    vertical-align: middle;
    margin: 0!important}
}

/* RESPONSIVENESS 2 - STACKING */
@media screen and (max-width: 880px) {
  .stack label {
    		display: block;
		    width: 100%;
		    border: 0;
    		font-size: 17px;
    		padding-right: 0;
		    padding-left: 0}
	
  .stack ul {
    		margin-top: 0;
		    margin-right: 0;
		    margin-left: 0}
	
  .stack ul li {border-right-color: transparent}   
  .stack .cite {font-size: .7em}
  .stack .fa {margin-right: 10px}
}

/** TYPOGRAPHY **/

/* BASIC */
.tabs ul li div { text-align: left }
.tabs ul li div h1,
.tabs ul li div h2,
.tabs ul li div h3,
.tabs ul li div p { margin-bottom: 10px; font-weight: 400 }

.tabs ul li div h1,
.tabs ul li div h2,
.tabs ul li div h3 { font-family: 'Electrolize', 'Helvetica Neue', Helvetica, Arial, sans-serif }

/* CITATIONS */

.cite { 
  color: #fff;
  display: inline-block;
  font: italic normal 400 14px
  'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  float: right;
  margin-top: 10px
}

.cite:before {
  content: '_';
  position: relative;
  color: #fff;
  top: -7px;
  margin: 5px
}

/* TEXT SELECTION */
.tabs ul li *::selection { background: #232323 }
.tabs ul li *::-moz-selection { background: #232323 }
/** END TYPOGRAPHY **/

::-webkit-scrollbar { display: none }