Tabs with CSS only

Marko Krstić
20 Jun 2020

HTML structure

<nav>
  <ul class="stepProgress">
    <li><a href="#1" >1</a></li>
    <li><a href="#2" >2</a></li>
    <li><a href="#3" >3</a></li>
    <li><a href="#4" >4</a></li>
  </ul>
</nav>
<div id="1"> Step 1 </div>
<div id="2"> Step 2 </div>
<div id="3"> Step 3 </div>
<div id="4"> Step 4 </div>
<div id="5"> Step 5 </div>

CSS

div{
  width:200px; height:200px;
  border:2px solid grey;
  text-align:center;
  display:none;
}

div:target{
  display:block;
}

Example on JSFiddle

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy