Currently, I am in the process of constructing a gallery using pure CSS. When I select image1, checkbox1 will be checked and div1 will become visible. This functionality has already been implemented successfully. However, an issue arises when I click on image2, causing div2 to appear. Subsequently, if I click on image1 again, div1 does not reappear due to div2 overlapping it.
HTML:
<div class="gallery">
<label for="toggle1"><a>1</a></label>
<input id="toggle1" type="checkbox">
<label for="toggle2"><a>2</a></label>
<input id="toggle2" type="checkbox">
<label for="toggle3"><a>3</a></label>
<input id="toggle3" type="checkbox">
<label for="toggle4"><a>4</a></label>
<input id="toggle4" type="checkbox">
<label for="toggle5"><a>5</a></label>
<input id="toggle5" type="checkbox">
<label for="toggle6"><a>6</a></label>
<input id="toggle6" type="checkbox">
<label for="toggle7"><a>7</a></label>
<input id="toggle7" type="checkbox">
<label for="toggle8"><a>8</a></label>
<input id="toggle8" type="checkbox">
<div class="conteudo1">1</div>
<div class="conteudo2">2</div>
<div class="conteudo3">3</div>
<div class="conteudo4">4</div>
<div class="conteudo5">5</div>
<div class="conteudo6">6</div>
<div class="conteudo7">7</div>
<div class="conteudo8">8</div>
</div>
I have omitted the CSS code since I struggled with automatically indenting it, but you can view it here.
Essentially, my goal is to uncheck all other checkboxes when checkbox1 is selected, and repeat this behavior for the remaining checkboxes.
I was never particularly fond of Javascript, but surprisingly managed to achieve this task within 10 minutes. Nevertheless, I am curious if there are alternative methods to accomplish the same outcome.
Thank you for your time!