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='http://fonts.googleapis.com/css?family=Roboto:400,400italic' rel='stylesheet'>


<div class='tabs effect9 vleft'>
	<!--TAB 1-->
	<input type='radio' name='tabs' id='tab1' class='content1' checked>
  <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>Introduction</h1>
			  <div class='grid-row'>
				<p class='grid-col grid-col-7'>
				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 class='grid-col grid-col-5'>
          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>
		</div>

		<h1>General Information</h1>
		<div class='grid-row'>
				<p class='grid-col grid-col-4'>
				Apple is the world's second-largest information technology company by revenue after Samsung Electronics, and the world's third-largest mobile phone maker after Samsung and Nokia. Fortune magazine named Apple the most admired company in the United States in 2008, and in the world from 2008 to 2012.On September 30, 2013, Apple surpassed Coca-Cola to become the world's most valuable brand in the Omnicom Group's 'Best Global Brands' report. However, the company has received criticism for its contractors' labor practices, and for Apple's own environmental and business practices.
				</p>
				<p class='grid-col grid-col-8'>
				As of May 2013, Apple maintains 408 retail stores in fourteen countries as well as the online Apple Store and iTunes Store, the latter of which is the world's largest music retailer. Apple is the largest publicly traded corporation in the world by market capitalization, with an estimated value of US$415 billion as of March 2013. As of September 29, 2012, the company had 72,800 permanent full-time employees and 3,300 temporary full-time employees worldwide. Its worldwide annual revenue in 2012 totalled $156 billion. In May 2013, Apple entered the top ten of the Fortune 500 list of companies for the first time, rising 11 places above its 2012 ranking to take the sixth position.
				</p>
		</div>
        <p class='cite'>Wikipedia</p>
		</div>
    </li>					
  </ul>
</div>

script.js

// CSS3 TABBED CONTENT

/* BROWSER COMPATILITY
--INTERNET EXPLORER 9+
--GOOGLE CHROME
--MOZILLA FIREFOX
--OPERA
--SAFARI
*/

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

style.css

body { padding: 40px }

.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;
	border: 1px solid #222;
	border-left-color: #555;
	font-size: 17px;
	text-align:left;
	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;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%
}

.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4,
.tabs > .content4:checked ~ ul > .content5,
.tabs > .content4:checked ~ ul > .content6,
.tabs > .content4:checked ~ ul > .content7 {
  /* 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 ***/

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

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

/* JUSTIFIED */
.tjustify-2 label {width:50%}
.tjustify-3 label {width:33.33%}
.tjustify-4 label {width:25%}
.tjustify-5 label {width:20%}

/* VERTICAL POSITIONS */
.vleft label,
.vright label {
	display: block;
	width: 25%;
	float: left;
	clear: left;
	border-bottom:0;
	margin-right: 0
}
.vright label {padding-right: 0;padding-left: 1px;float: right;clear: right}

.vleft ul {margin-left: 25%}
.vright ul {margin-right: 25%}

.tright ul li,
.vright ul li {
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-o-transform-origin: 100% 0%;
	transform-origin: 100% 0%
}



/*** 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)
}

.effect9 ul {
	-webkit-perspective: 2000px;
	perspective: 2000px;
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}
.effect9 ul li {
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-o-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}
.effect9.vleft ul li {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
}
.effect9.vright ul li {
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-o-transform: rotateY(-90deg);
	transform: rotateY(-90deg)
}

.effect9 > .content1:checked ~ ul > .content1,
.effect9 > .content2:checked ~ ul > .content2,
.effect9 > .content3:checked ~ ul > .content3,
.effect9 > .content4:checked ~ ul > .content4 {
	-webkit-transition-delay: .2s;
	-moz-transition-delay: .2s;
	-o-transition-delay: .2s;
	transition-delay: .2s
}

.effect10 > ul > li {
	-webkit-transform: scale(0.1,0.1);
	-moz-transform: scale(0.1,0.1);
	-ms-transform: scale(0.1,0.1);
	-o-transform: scale(0.1,0.1);
	transform: scale(0.1,0.1)
}

/* END EFFECTS */

/** GRID SYSTEM **/
.tabs .grid-row {margin-top: 20px}

/* CLEARFIX */
.tabs .grid-row:after {
	content: '';
	display: table;
	clear: both
}
/**/

.tabs .grid-row:first-child {margin-top: 0}

.tabs .grid-col {
	display: block;
	float: left;
	width: 98%;
	margin-right: 1%;
	padding:0
}

.tabs .grid-col:first-child {margin-left: 0}

.tabs .grid-col-1 {width: 6.5%}
.tabs .grid-col-2 {width: 15%}
.tabs .grid-col-3 {width: 23.5%}
.tabs .grid-col-4 {width: 32%}
.tabs .grid-col-5 {width: 40.5%}
.tabs .grid-col-6 {width: 49%}
.tabs .grid-col-7 {width: 57.5%}
.tabs .grid-col-8 {width: 66%}
.tabs .grid-col-9 {width: 74.5%}
.tabs .grid-col-10 {width: 83%}
.tabs .grid-col-11 {width: 91.5%}
/**/

/** 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;
text-align: left;
margin: 20px 0
}

/* 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 **/


/* RESPONSIVE STACKING */
@media screen and (max-width: 880px) {
	.tabs .grid-col,
	.tabs .grid-col:first-child {
		float: none;
		width: 100%!important
	}
	
  .tabs label {
		display: block;
		width: 100%;
		float:none;
		clear:none;
		border-color: transparent;
		border-bottom-color:#555;
		font-size: 17px;
		padding-right: 0;
		padding-left: 0}
	
  .tabs ul {
		margin-top: 0;
		margin-right: 0;
		margin-left: 0}
	
  .tabs ul li {border-right-color: transparent}   
  .tabs .fa {margin-right: 10px}
}

/* END RESPONSIVENESS */

::-webkit-scrollbar { display: none }