Hide elements but display some child elements with Javascript or Jquery

Question

Talk, you guys, baby?

I am making a page that displays a contract for the person. There are some fields that can be filled. But as it sometimes gets long, I’m trying to make a simplified mode, which when activated, shows only the input fields.

I thought of using jquery to hide everything and display only inputs, but when applying in the general context it does not let display what is inside. Is there any way to re-display items that were hidden by the parent element?

An example

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

So I thought it would work, because the parent element

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

I need to apply a display:None somehow in the overall context, so I can display only the inputs with a nicer formatting.

Any suggestions?

Answer 1

Jquery is a good solution for this problem. In general, your problem is in manipulating the elements; I made an example below with manipulations through the identifier, class and attributes using the toggle(); (function to display if hidden and hide if visible).

$('#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>

Answer 2

Work with classes in the elements. In the example all with class ocultar will be hidden.

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.stack.imgur.com/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>