Skip to main content
3 de 3
se añadieron 580 caracteres en el cuerpo
ntzz
  • 278
  • 4
  • 21

He separado el divde contenido respecto del row men para diferenciarlo, si quieres tu misma estructura solamente deberas ajustar los selectores. De esta forma se muestra y se desvanece si vuelves a hacer click en los elementos. Deberias entender el porque de cada cosa y como utilizar atajos con jQuery, te será más facil realizar estas pequeñas cosas.

$(document).ready(function() {
    $('.mostrar div').hide();
});

$('div.men > div').on('click',function(){
        
  if($(this).attr('id')=='depilacion' & $('.mostrar div#ContenidoDepilacion').css('display') == 'none' ){
   
    $('.mostrar div#ContenidoDepilacion').slideDown("slow"); 
   }else{
    $('.mostrar div#ContenidoDepilacion').hide(); 
   }
  
  if($(this).attr('id')=='lifting'  & $('.mostrar div#ContenidoLifting').css('display') == 'none' ){
    
    $('.mostrar div#ContenidoLifting').fadeIn("slow");
  }else{
    $('.mostrar div#ContenidoLifting').hide();
  }
  if($(this).attr('id')=='lipoescultura'  & $('.mostrar div#ContenidoLipoescultura').css('display') == 'none' ){
    $('.mostrar div#ContenidoLipoescultura').fadeIn("slow");  
  }else{
    $('.mostrar div#ContenidoLipoescultura').hide(); 
  }
  if($(this).attr('id')=='tattoos'  & $('.mostrar div#ContenidoTattoos').css('display') == 'none' ){
    $('.mostrar div#ContenidoTattoos').fadeIn("slow");
  }else{
    $('.mostrar div#ContenidoTattoos').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row men">
  <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto active">
    <h3>DEPILACIÓN <br>LÁSER</h3>
  </div>
  <div id="lifting" class="col-3 cuadros cuadros-opciones2 efecto center ">
    <h3>LIFTING <br> SIN CIRUGÍA</h3>
  </div>
  <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 efecto center">
    <h3>LIPOESCULTURA</h3>
  </div>
  <div id="tattoos" class="col-3 cuadros cuadros-opciones4 efecto center ">
    <h3>ELIMINACIÓN <br> TATTOOS</h3>
  </div>
</div>
<div class="mostrar">
  <div id="ContenidoDepilacion" class="">Hola contenido depilación</div>
  <div id="ContenidoLifting" class="">Hola contenido lifting</div>
  <div id="ContenidoLipoescultura" class="">Hola contenido depilación</div>
  <div id="ContenidoTattoos" class="">Hola contenido tattoos</div>
</div>

ntzz
  • 278
  • 4
  • 21