Lo solucione así pero no se si es la forma correcta:
$(document).ready(function(){
$("#depilacion").on( "click", function() {
$('#ContenidoDepilacion').show(500,);
$('#ContenidoLifting').hide(500,);
$('#ContenidoLipoescultura').hide(500,);
$('#ContenidoTattoos').hide(500,);
});
$("#lifting").on( "click", function() {
$('#ContenidoDepilacion').hide(500);
$('#ContenidoLifting').show(500);
$('#ContenidoLipoescultura').hide(500);
$('#ContenidoTattoos').hide(500);
});
$("#lipoescultura").on( "click", function() {
$('#ContenidoDepilacion').hide(500);
$('#ContenidoLifting').hide(500);
$('#ContenidoLipoescultura').show(500);
$('#ContenidoTattoos').hide(500);
});
$("#tattoos").on( "click", function() {
$('#ContenidoDepilacion').hide(500);
$('#ContenidoLifting').hide(500);
$('#ContenidoLipoescultura').hide(500);
$('#ContenidoTattoos').show(500);
});
});
Edito
Puedes reducir el código poniendo tus divs
dentro de otro div
(divMenu
) y filtrando con el selector .not
$(document).ready(function () {
$("#depilacion").on("click", function () {
$("#divMenu div").not($('#ContenidoDepilacion')).fadeOut("slow").promise().done(function () {
$('#ContenidoDepilacion').fadeIn("slow");
});
});
$("#lifting").on("click", function () {
$("#divMenu div").not($('#ContenidoLifting')).fadeOut("slow").promise().done(function () {
$('#ContenidoLifting').fadeIn("slow");
});
});
$("#lipoescultura").on("click", function () {
$("#divMenu div").not($('#ContenidoLipoescultura')).fadeOut("slow").promise().done(function () {
$('#ContenidoLipoescultura').fadeIn("slow");
});
});
$("#tattoos").on("click", function () {
$("#divMenu div").not($('#ContenidoTattoos')).fadeOut("slow").promise().done(function () {
$('#ContenidoTattoos').fadeIn("slow");
});
});
});
<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 id="divMenu">
<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>
</div>