I have the following code that shows the <div> only when a certain option of the first <select> is chosen, but it leaves a giant space on the page, due to having the <div> tags and they are only hidden , is there any way to get% s to stay on top of each other? So there would not 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>
