CODEWITHSUNDEEP
htmluser-interfacetabscss
Alex
Alex

Reputation: 68494

HTML tab interface using only CSS

is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with CSS 3.0?

the markup would be something like:

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>

Upvotes: 5

Views: 14804

Answers (4)

zzzzBov
zzzzBov

Reputation: 179046

:target is generally the preferred way of doing tabs.

You can also be clever with input:radio, or input:checkbox elements.

Using the next-sibling (+) and :checked selectors in clever ways can allow you to do a pure CSS accordion, toggleable lists, or tabs like this.

input {
  position: absolute;
  right: 100%;
}

input:checked+div {
  display: block;
}

div {
  display: none;
}
<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
  First content
</div>
<input type="radio" id="two" name="tab" />
<div>
  Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
  Third content
</div>

View on JSFiddle

Upvotes: 20

Rayyan007
Rayyan007

Reputation: 21

Here is a super easy code for achieving the functionality

.tabs {
  display: flex;
  flex-direction: column;
}
 
.tabs .tab-labels {
  display: flex;
  gap:3px;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  padding: 1em;
  background: #9AA092;
  cursor: pointer;
  width: 33.333%;
}
 
.tab-content {
  padding: 1em;
  display: none;
  background: DodgerBlue;
}
 
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <input type="radio" id="tab2" name="tabs">
  <input type="radio" id="tab3" name="tabs">
 
  <div class="tab-labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  
  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

Upvotes: 0

Sotiris
Sotiris

Reputation: 40066

It is possible with html and css for most modern browsers using the border-radius property (not supported by internet explorer 8 and below).

css

li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

html

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

To support internet explorer you can use css3pie but you have to keep in mind that it uses javascript.

You can find more information about border-radius at: http://www.w3.org/TR/css3-background/#the-border-radius

Example: http://jsbin.com/idiza5/2

Upvotes: 1

Knu
Knu

Reputation: 15136

In pure CSS3 you can use the :target selector to achieve a "tabbed interface".
Just google "tab css3 :target". Here's a tutorial about it.

Upvotes: 4

Related Questions