I am attempting to transform the classless CSS and HTML provided below from a list format to using radio buttons and labels for tabbed content.
My goal is to make it concise and avoid redundancy. Here is the setup of what I am aiming for:
<nav>
<input type="radio" name="tabs" checked>
<label for="tab1">One</label>
<input type="radio" name="tabs">
<label for="tab2">Two</label>
<input type="radio" name="tabs">
<label for="tab3">Three</label>
<section id="tab2">Tab 2</section>
<section id="tab3">Tab 3</section>
<section id="tab1">Tab 1</section>
</nav>
Below is the existing tabbed content code that currently uses an unordered list. No additional styling has been added for simplicity:
nav>ul~section:last-of-type{display:block;}
nav>ul~section:target~section:last-of-type{display:none;}
section:not(:target) {display:none;}<nav>
<ul>
<li><a href="#tab1">One</a>
<li><a href="#tab2">Two</a>
<li><a href="#tab3">Three</a>
</ul>
<section id="tab2">Tab 2</section>
<section id="tab3">Tab 3</section>
<section id="tab1">Tab 1</section>
</nav>