0

Fala galera, beleza?

Estou fazendo uma página que exibe um contrato pra pessoa. Nele tem alguns campos que podem ser preenchidos. Mas como as vezes fica longo, estou tentando fazer um modo simplificado, que ao ser ativado, mostra apenas os campos inputs.

Pensei em usar o jquery pra esconder tudo e exibir somente os inputs, porém ao aplicar no contexto geral ele não deixa exibir o que está dentro. Existe alguma maneira de voltar a exibir itens que foram escondidos pelo elemento pai?

Um exemplo

<div id="result">
 <p>Aqui um paragrafo</p>
 <p>Outro paragrafo: Preencha <input type="text" class="resize" /></p>
 <p>Outro input <input type="text" class="resize" /></p>
</div>

Ai achei que isso funcionaria, devido ao elemento pais ter

$("#result").hide(); //Ou talvez $("p").hide();
$("input").show();

Preciso aplicar um display:none de alguma maneira no contexto geral, pra que eu possa exibir apenas os inputs com uma formatação mais agradável.

Alguma sugestão?

2
  • Cara mas qual o sentido de mostrar um monte de input vazio, sem label, sem texto sem placeholder... Sua pergunta ficou meio confusa
    – hugocsl
    Commented 22/06/2020 às 16:59
  • Então, nos meus inputs eu tenho um atributo data, e uso ele no css pra exibir com um before, ai funciona como label. Eu deixei o exemplo bem simples pois o foco é exibir o que está dentro de um elemento escondido
    – Rafael
    Commented 22/06/2020 às 17:18

2 Respostas 2

1

O Jquery é uma boa solução para esse problema. De forma geral, seu problema está em manipular os elementos; fiz um exemplo abaixo com manipulações por meio do identificador, classe e atributos utilizando o toggle(); (função para exibir caso esteja oculto e ocultar caso esteja visíbel).

$('#mostra_e_esconde').on('click', function (e) {
  $('.elementos').toggle();
})

$('#mostra_e_esconde_elemento_filho').on('click', function (e) {
  
  $('#elemento3>span:first').toggle();
})

$('#mostra_e_esconde_elemento_filho2').on('click', function (e) {
  
  $('#elemento3>span').eq(1).toggle();
})

$('#mostra_e_esconde_elemento_filho3').on('click', function (e) {
  
  $('#elemento3>span').eq(2).toggle();
})

$('.botoes').on('click', function (e){
  //pega o número dentro do data id
  elemento_numero = $(this).attr('data-id');
  //mostra ou esconde o elemento dependendo do número
  $('#elemento'+elemento_numero).toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p id="mostra_e_esconde" style="cursor:pointer;">Mostrar e esconder todos</p>
<p id="mostra_e_esconde_elemento_filho" style="cursor:pointer;">Mostrar e esconde primeiro span dentro de outro</p>
<p id="mostra_e_esconde_elemento_filho2" style="cursor:pointer;">Mostrar e esconde segundo span dentro de outro</p>
<p id="mostra_e_esconde_elemento_filho3" style="cursor:pointer;">Mostrar e esconde terceiro span dentro de outro</p>
<p class="botoes" data-id="1" style="cursor:pointer;">Mostrar e esconder 1</p>
<p class="botoes" data-id="2" style="cursor:pointer;">Mostrar e esconder 2</p>
<p class="botoes" data-id="3" style="cursor:pointer;">Mostrar e esconder 3</p>

<hr />
<div id="elemento1" class="elementos" style="color:red;">elemento1</div>
<div id="elemento2" class="elementos" style="color:yellow;">elemento2</div>
<div id="elemento3" class="elementos" style="color:green;"><span>elemento3</span>
<span>- segundo span dentro do elemento 3</span><span> terceiro span</span>
</div>

3
  • É uma boa técnica pra conseguir manipular os elementos individualmente, mas porém acaba caindo no mesmo problema que tenho. Pelo seu exemplo, eu não consigo esconder tudo e mostrar somente o span dentro do elemento 3, pois uma vez que eu esconder o 3 o span vai junto =/
    – Rafael
    Commented 22/06/2020 às 17:23
  • Entendi @Rafael , desculpe. Acredito que a forma mais fácil de fazer isso é identificando sempre todos os elementos (principalmente) dentro de outros para você conseguir encontrar com facilidade seu acesso no DOM; roda o código outra vez, eu apliquei as mudanças Commented 22/06/2020 às 17:54
  • Desculpa a demora pra responder meu caro. Infelizmente não tenho muito controle do html pois recebo ele vindo de um editor (o summernote) que o usuário monta. No final resolvi clonando os inputs pra uma div separada. Mas obrigado pela ajuda
    – Rafael
    Commented 28/06/2020 às 0:56
1

Trabalhe com classes nos elementos. No exemplo todos com classe ocultar serão ocultados.

function ocultar() {
   $(".ocultar").hide();
   $("#contador").html("<button type='button' onClick='mostrar()'>Mostrar </button>");

}

function mostrar() {
   $(".ocultar").show();
   $("#contador").html("<button type='button' onClick='ocultar()'>Ocultar </button>");;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="contador"><button type='button' onClick="ocultar()">Ocultar</button></div>
 <img  class="ocultar" border="0" src="https://i.sstatic.net/xIPtg.gif" width="40" height="29">
 <p class="ocultar">Aqui um paragrafo</p>
 <p class="">Outro paragrafo: Preencha <input type="text" class="resize" /></p>
 <p class="naoOcultar">Outro input <input type="text" class="resize" /></p>
 <p class="ocultar">mais um paragrafo</p>
 
</div>

   

1
  • Desculpa a demora pra responder amigo. Minha dificuldade, é que o html que eu recebo é dinâmico, o usuário cria a estrutura por um editor (Summernote). No final resolvi clonando os inputs, e apresentando em uma div separadamente.
    – Rafael
    Commented 28/06/2020 às 0:55

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 .