> For the complete documentation index, see [llms.txt](https://inkstellar.gitbook.io/ink-blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://inkstellar.gitbook.io/ink-blog/css-tutorials/simple-tab.md).

# CSS Tabs

Tabs are one of the most frequently used HTML component, across a variety of web applications in infinite fashions.

## What are HTML tabs?

HTML Tabs are most simplest system of focusing a content based on a specific title. We can simply swap the descriptive/explanatory content when we focus on a title. It can be made to slide or show/hide depending on our necessity. 

To create a simple tabbed structure, we need to use a combination of HTML, CSS and Js. To see that example , please check the [link ](https://www.w3schools.com/howto/howto_js_tabs.asp)here.

Here we are going to learn about creating a tab without using Js.

## Tab with simple HTML and CSS

Radio buttons are awesome but used maily in forms. Lets make use of radio buttons to make tabs.

### HTML

I created a simple HTML sructure with radio buttons and the contents inside the same parent container.

{% code title="index.html" %}

```markup
	<div class="simple-tab">
			<div>
				<input type="radio" id="tab1" name="tab" value="tab1" checked>
				<label for="tab1">Ipsos nosse</label>
        <input type="radio" id="tab2" name="tab" value="tab2">
				<label for="tab2">Illa videamus</label>
        <input type="radio" id="tab3" name="tab" value="tab3">
				<label for="tab3">Quis est tam</label>
        <span>
          <h4>Tab content 1</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Hic nihil fuit, quod quaereremus. Aliter enim nosmet ipsos 
            nosse non possumus. Duo Reges: constructio interrete. Sed haec 
            nihil sane ad rem; </p>
          </span>
				<span>
          <h4>Tab content 2</h4>
          <p>Nunc omni virtuti vitium contrario nomine opponitur. Sed ille, 
          ut dixi, vitiose. Quae cum essent dicta, discessimus. </p>
          <p>Illi enim inter se dissentiunt. Invidiosum nomen est, infame, 
          suspectum. Quae contraria sunt his, malane? Illa videamus, quae a 
          te de amicitia dicta sunt. Tubulo putas dicere? Pauca mutat vel plura 
          sane; </p>
        </span>
				<span>
          <h4>Tab content 3</h4>
          <p>Disserendi artem nullam habuit. Reguli reiciendam; Illi enim 
          inter se dissentiunt. Si quae forte-possumus. Quis est tam dissimile 
          homini. </p>
          <p>Sint modo partes vitae beatae. Sic consequentibus vestris 
          sublatis prima tolluntur. Aperiendum est igitur, quid sit voluptas; 
          Quid adiuvas? </p>
        </span>
			</div>
		</div>
```

{% endcode %}

![Image: Visual of the above code](/files/-M5ofkjTFMKQdbWhSCZQ)

### CSS

The CSS plays the main part here. We will make use of the \~ selector to reference items in relative to the checked radio buttons.&#x20;

```css
input[type="radio"]:nth-of-type(n):checked ~ .content:nth-of-type(n) {
 /* show or hide content */
}
```

So that once a radio button is checked, it will trigger the relative content. Below is the entire css that could create the tab functionality.

```css
input[type="radio"]{
     display: none;
}
 input[type="radio"]+label{
     padding: 10px 20px;
     background:#465f80;
     transition:padding 0.3s ease-in;
     border-top:4px solid white;
     cursor: pointer;
}
 input[type="radio"]:checked+label{
     background:#1b2939;
     border:0;
     padding-top:14px;
}
 span{
     display: none;
     padding:10px;
     background:#1b2939;
}
 span p::first-letter{
     color: #b1c1ca;
     font-size: 23px;
     padding-right: 10px;
}
 input[type="radio"]:checked:nth-of-type(1) ~ span:nth-of-type(1){
     display: block;
}
 input[type="radio"]:checked:nth-of-type(2) ~ span:nth-of-type(2){
     display: block;
}
 input[type="radio"]:checked:nth-of-type(3) ~ span:nth-of-type(3){
     display: block;
}
 .simple-tab{
     color: #b1c1ca;
     display:grid;
     width:480px;
     grid-template-areas: auto auto auto;
     margin-top:50px;
}
```

This will give you the exact tab functionality.

### Demo

{% embed url="<https://stackblitz.com/edit/inkui-tab?ctl=1&embed=1&file=inkui.css&hideExplorer=1>" %}

or the demo can be found in the link below.

[Demo ](https://stackblitz.com/edit/inkui-tab?ctl=1\&embed=1\&file=inkui.css\&hideExplorer=1).

Thank you reading it.