1

Eu tenho o código abaixo que mostra o <div> apenas quando é escolhida determinada opção do primeiro <select>, porém ele deixa um espaço gigante na página, devido ao fato de ter as tags <div> e elas estarem apenas escondidas, tem alguma forma de fazer com que os <div> fiquem um em cima do outro? Assim não ficaria um buraco na página, como mostra na foto.

           <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>    

inserir a descrição da imagem aqui

1 Resposta 1

2

você alterar o style da div de acordo com o select selecionado, ao invés de visibility: hidden usa display: none.

1
  • Muito obrigado mesmo, salvou o dia! Commented 20/11/2017 às 17:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .