marko krstić

Collections

Archives

Tabs with CSS only

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

Let's Connect

Feel free to reach out for collaborations or just a friendly hello 😀
mailme@markokrstic.com
linkedininstagramdribbblefacebook-official