# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://inkstellar.gitbook.io/ink-blog/css-tutorials/simple-tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.