Tabs are generally used to break content into multiple sections that can be swapped to save space. The tabs effect displays a single content area with multiple panels (sections), each associated with a header (or tab) in a list.
- This effect is created only with CSS and HTML, without JavaScript.

Code (click to select):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Tabs with CSS</title>
<style type="text/css">
/* Tabs effect with CSS - https://coursesweb.net/css/ */
.tabs {
 position: relative;
 width: 80%;
 min-height: 350px;
 margin: 1.2em auto 1em auto;
}
.tabs .tab {
 display: inline-block;
 margin: 0 -1px;
}
.tabs .tab label {
 position: relative;
 margin: 0;
 background: #dadada;
 border: 1px solid #ccc;
 border-bottom: none;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding: .5em .6em;
 font-weight: 700;
 cursor: pointer;
}
.tabs .tab [type=radio] {
 display: none;
}
.tabs .tab [type=radio]:checked ~ label {
 background: #d8fbda;
 border-bottom: 1px solid white;
 text-decoration: underline;
}
.tabs .tab [type=radio]:checked ~ label ~ .content {
 display: block;
}
.tabs .tab .content {
 display:none;
 position: absolute;
 top: 1.7em;
 left: 0;
 right: 0;
 background: #fdfdee;
 border: 1px solid #ccc;
 padding: .3em .8em;
}
/* END Tabs effect */
</style>
</head>
<body>

<div class="tabs">
 <div class="tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked />
 <label for="tab-1">Tab-1</label>
 <div class="content">
 <p>Content in Tab 1.<br/>
 Link: <a href="https://coursesweb.net/" title="Web Programming and Development">CoursesWeb.net</a></p>
 </div>
 </div>
 
 <div class="tab">
 <input type="radio" id="tab-2" name="tab-group-1" />
 <label for="tab-2">Tab-2</label>
 <div class="content">
 <p>Text and link in Tab 2.<br/>
 Free <a href="https://coursesweb.net/css/" title="CSS Course">CSS Course</a>.</p>
 </div>
 </div>
 
 <div class="tab">
 <input type="radio" id="tab-3" name="tab-group-1" />
 <label for="tab-3">Tab-3</label>
 <div class="content">
 <p>Content in Tab 3.<br/>
 Play <a href="https://coursesweb.net/games/" title="Flash Games"><img src="https://coursesweb.net/addons/css/thumb5_image.jpg" alt="Flash Games" width="183" height="123" /></a></p>
 </div>
 </div>
 
 <div class="tab">
 <input type="radio" id="tab-4" name="tab-group-1" />
 <label for="tab-4">Tab-4</label>
 <div class="content">
 <div>Content in Tab 4.<br/><h4>Tabs effect with CSS</h4></div>
 </div>
 </div>
 
 <div class="tab">
 <input type="radio" id="tab-5" name="tab-group-1" />
 <label for="tab-5">Tab-5</label>
 <div class="content">
 <p>Other piece of HTML, images, text, etc., in Tab 5.<br/>Other line...</p>
 </div>
 </div> 
</div>
</body>
</html>
Demo:

Content in Tab 1.
Link: CoursesWeb.net

Text and link in Tab 2.
Free CSS Course.

Content in Tab 3.
Play Flash Games

Content in Tab 4.

Tabs effect with CSS

Other piece of HTML, images, text, etc., in Tab 5.
Other line...

- The technique is simple, the content is positioned "absolute" and it is initialy hidden. There are used radio type buttons with label tag associated to each button. The radio buttons are hidden, but when the associated label is clicked, that radio is checked, event that can be detected in css (with: " .tab [type=radio]:checked "), and the content from that tab (label element) it is displayed (with: " .tab [type=radio]:checked ~ label ~ .content { display: block; } ").

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Tabs effect with CSS

Last accessed pages

  1. For loops in ActionScript (2076)
  2. DirectoryIterator to get file and directory info (2259)
  3. Circle and Oval with CSS (5685)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (105607)
  5. ActionScript 3 - Change MovieClip Color (6953)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (281)
  2. Register and show online users and visitors (176)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (155)
  4. Read Excel file data in PHP - PhpExcelReader (155)
  5. JavaScript Course - Free lessons (128)