Div tags occupying the same space?

Question

I have the code below that shows the <div> only when a particular option of the former is chosen <select>, but it leaves a giant space on the page due to the fact that it has the tags <div> and they’re just hiding, there’s some way to make <div> stay on top of each other? So there would be a hole in the page, as shown in the photo.

           <div class="form-group">                
          <label> Categoria <br />
            <select class="form-group" name="categoria" id="categoria" onchange="mostraCampogol(this.value);mostraCampopleno(this.value);mostraCamposenior(this.value);">
              <option></option>
              <option value="Golfinho">Golfinho/</option>
              <option value="Pleno">Pleno</option>
              <option value="Sênior">Sênior</option>
            </select>
          </label>
        </div>
        <div class="form-group" id="turmagol1" style="visibility: hidden;"> 
          <label> Turma <br /> 
          <select class="form-group" name="turmagol" id="turmagol">
              <option value="Turma 1">Turma 1</option>
              <option value="Turma 2">Turma 2</option>
              <option value="Turma 3">Turma 3</option>
            </select>
          </label>
        </div>
        <div class="form-group" id="turmapleno1" style="visibility: hidden;"> 
          <label> Turma <br /> 
          <select class="form-group" name="turmapleno" id="turmapleno">
              <option value="Turma 4">Turma 4</option>
              <option value="Turma 5">Turma 5</option>
              <option value="Turma 6">Turma 6</option>
          </select>
          </label>
        </div>
        <div class="form-group" id="turmasenior1" style="visibility: hidden;"> 
          <label> Turma <br /> 
          <select class="form-group" name="turmasenior" id="turmasenior">
              <option value="Jovem aprendiz em treinamento">Jovem aprendiz em treinamento</option>
              <option value="Jovem aprendiz na sede">Jovem aprendiz na sede</option>
              <option value="Jovem aprendiz no campo">Jovem aprendiz no campo</option>
            </select>
          </label>
        </div>    

Answer 1

you change the style of the div according to the selected select, instead of visibility: Hidden uses display: None.