I created a makeshift hide/show menu in HTML/CSS using a checkbox, it works great to hide and show text and links, but I have a section where I'd like to show a button when the "checkbox" is clicked. At first it looks great, the button is hidden and when the user clicks the checkbox, a button appears below it. My problem that I'm having is that if the user clicks below the checkbox where the button appears before the button actually appears, they can still trigger the button. Any idea?
<td>
<label class="collapsible">
<input type="checkbox" />
<span class="collapser">Edit</span>
<span class="arrow">></span>
<div class="collapsed">
<form method="post">
<input type="hidden" id="pwd" name="deleteid" value='. $value["id"] . '>
<button onclick="return confirm_delete();" type="submit" name="DelBidSubmit" class="btn btn-default">Delete</button>
<script type="text/javascript">
function confirm_delete() {
return confirm("Are you sure you wish to delete that?");
}
</script></form></div></label></td>
Heres my CSS code just in case
.collapsible {
display: block;
margin-bottom: 1rem;
}
.collapsible input {
position: absolute;
left: -9999px;
}
.collapsible input:focus ~ .collapser {
border-color: grey;
}
.collapsible .collapser {
cursor: pointer;
border: 1px transparent dotted;
}
.collapsible .arrow {
float: right;
margin-left: 0.5em;
display: inline-block;
transform: rotate(90deg);
transition: transform 0.25s ease-out;
}
.collapsible input:checked ~ .arrow,
.collapsible input:checked ~ .collapser .arrow {
transform: rotate(270deg);
}
.collapsible .collapsed {
font-size: 0;
margin: 0;
opacity: 0;
padding: 0;
/* fade out, then shrink */
transition: opacity 0.25s, margin 0.5s 0.25s, font-size 0.5s 0.25s, padding 0.5s 0.25s;
}
.collapsible input:checked ~ .collapsed {
font-size: 12px;
opacity: 1;
height: auto;
padding: 5px 0;
/* grow, then fade in */
transition: margin 0.25s, padding 0.25s, font-size 0.25s, opacity 0.5s 0.25s;
}
