Currently, I am experimenting with creating a collapsible button solely using HTML and CSS. Below is the code snippet that I have been working on:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>The current implementation works fine. However, my goal is to position the hidden div after the button instead of before it. Unfortunately, simply moving the div below the checkbox label does not produce the desired outcome.
I would appreciate any insight or solutions on how to achieve this rearrangement successfully.
Thank you in advance!