<input type='radio' id='sect1toggle' name='toggles' checked>
<section>
<h1>1</h1>
<label for='sect2toggle'>Next</label>
</section>
<input type='radio' id='sect2toggle' name='toggles'>
<section>
<h1>2</h1>
<label for='sect1toggle'>Back</label>
<label for='sect3toggle'>Next</label>
</section>
<input type='radio' id='sect3toggle' name='toggles'>
<section>
<h1>3</h1>
<label for='sect2toggle'>Back</label>
<label for='sect4toggle'>Next</label>
</section>
<input type='radio' id='sect4toggle' name='toggles'>
<section>
<h1>4</h1>
<label for='sect3toggle'>Back</label>
</section>
input {
display: none;
}
label {
display: inline-block;
background-color: hsl(0,0%,75%);
padding: 3px 6px;
border: solid 1px black;
}
section {
display: none;
}
input:checked + section {
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.