When the user is directed to the page or the page is refreshed, the football field should be visible, initially . Subsequently, the user would have the option to collapse the field if they didn’t want to view it. Currently, the page opens with the field hidden. I’d like to reverse that.
HTML:
I tried placing the image within the tag (where it currently sits) in order to make it responsive with the ‘-‘ and ‘+’ signs. I also placed it outside of the label tag.
CSS:
I tried using max-height along with a visibility: hidden and visibility: visible as well as display: none and display: flex. The combination of these either minimized the image, made it disappear completely or didn’t respond along with the ‘-‘ or ‘+’.
This is my current code:
.game-board {
display: block;
font-size: 1.5rem;
text-align: center;
color: #dcdcdc;
}
label::before {
display: flex;
flex-direction: row;
justify-content: flex-end;
content: '-';
margin-right: 20px;
font-size: 24px;
font-weight: bold;
}
input[type="checkbox"] {
display: none;
}
.football {
width: 90%;
}
.game-board input[type="checkbox"]:checked+label::before {
content: '+';
}
.game-board input[type="checkbox"]:checked+label .football {
max-width: 0px;
}
<div class="game-board">
<input id="field" type="checkbox" checked />
<label for="field"><img class="football" src="img/Saints_Football_field.png" alt="Home Field"></label>
</div>
2
Answers
Is this solve your problem?
Just remove this
checked
in your input.So, it should look like this.
Not 100 percent clear on your intent or desire here.
If you want to toggle the image or the actual checkbox and what you want as clickable is not super clear but I believe you can work with this perhaps as a starting point. (perhaps you mean to wrap the checkbox in the +/- ? pretty easy to swap the image and the div for those around if needed.
You probably should go with a grid so you can put things where you need them on both X and Y. Here I used areas with names and put some appropriate comments in the CSS; I used colors on the +/- so you can see it mirror the checkbox toggle when the image is clicked – which works because the label wraps the image and has that
for=""
on it.I added some ugly borders and colors for visual clarity of what is where.