Upon refreshing the screen, how am I able to keep the field visible without having to open it? The field should be visible with the user closing it

Question

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>

IF any of the supplied answers provides your solution please select/accept that one or add notes as to why none do so. — Mark Schultheiss, Mar 28 '23 at 13:24

score 0 · Answer 1 · answered Mar 16 '23 at 08:51

Is this solve your problem?

Just remove this checked in your input.

So, it should look like this.

.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;
}`enter code here`

<div class="game-board">
    <input id="field" type="checkbox"/>
    <label for="field"><img class="football" src="img/Saints_Football_field.png" alt="Home Field"></label>
</div>

Mark Schultheiss · Answer 2 · 2023-03-16T17:09:44.700

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.

* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
}

.board-container {
  display: grid;
  /* super center the game board */
  place-items: center;
}

.game-board {
  display: grid;
  grid-template-areas: " . field" "plus field" " .   field";
  grid-gap: 0.5rem;
  grid-template-columns: 1fr auto;
  grid-auto-rows: 1fr auto 1fr;
  align-items: start;
  color: #dcdcdc;
  font-weight: 600;
  border: solid 1px blue;
}

input[type="checkbox"].field-toggle {
  grid-area: cbx;
  /* hidden checkbox but click "field" checks/unchecks */
  display: none;
  /* make it obvious it is hidden */
  border: solid 8px cyan;
}

.plus-minus {
  grid-area: plus;
  font-size: 2.5rem;
  border: solid 1px pink;
  /* keeps +/- from jumping the width since they are different */
  width: 1em;
}

label.field-label {
  grid-area: field;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-board input[type="checkbox"].field-toggle~.plus-minus::before {
  /* these just show the +/- mirror the checkbox state */
  content: '-';
  color: green;
}

.game-board input[type="checkbox"].field-toggle:checked~.plus-minus::before {
  /* these just show the +/- mirror the checkbox state */
  content: '+';
  color: red;
}

.football-field {
  width: 600px;
  height: 330px;
  background-color: #00FF0011;
  /* get the alt text vertial aligned match height; and centered */
  line-height: 330px;
  text-align: center;
}

<div class="board-container">
  <div class="game-board">
    <input class="field-toggle" id="field" type="checkbox" checked />
    <label class="field-label" for="field"><img class="football-field" src="img/Saints_Football_field.png" alt="Home Field"/></label>
    <div class="plus-minus">&nbsp;</div>
  </div>
</div>

Upon refreshing the screen, how am I able to keep the field visible without having to open it? The field should be visible with the user closing it

2 Answers2