$(function(){
$('button').on('click',function(){
var s = $('.contenedor p');
if ($(this).text() === 'Ocultar'){
$(this).text('Mostrar');
s.fadeOut();
} else {
$(this).text('Ocultar');
s.fadeIn();
}
});
});
.contenedor{
background: #EDEDED; height: 300px; width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
<p>tortuga</p>
</div>
</div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
<p>gato</p>
</div>
</div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
<p>loro</p>
</div>
</div>
<br>
<div class="container">
<section>
<button>Ocultar</button>
</section>
<div class="contenedor">
<p>pato</p>
</div>
</div>
Hola a todos que estén leyendo esto, tengo este código de prueba, en el cual muestra botones y 4 divs que contienen un parrafo. Mi problema es el siguiente, espero me puedan ayudar: No logro hacer que un texto en particular se oculte. Cuando le das en ocultar, se ocultan todos los elementos p, ¿Cómo oculto sólo el texto que esta debajo del boton y no todos? En otras palabras, cuando se de clic en un boton se debe ocultar el texto que este debajo suyo y evitar que todos se oculten. (Aún soy novato en Jquery). Gracias.