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')).hide(500);
$('#ContenidoDepilacion').show(500);
});
$("#lifting").on( "click", function() {
$("#divMenu div").not($('#ContenidoLifting')).hide(500);
$('#ContenidoLifting').show(500);
});
$("#lipoescultura").on( "click", function() {
$("#divMenu div").not($('#ContenidoLipoescultura')).hide(500);
$('#ContenidoLipoescultura').show(500);
});
$("#tattoos").on( "click", function() {
$("#divMenu div").not($('#ContenidoTattoos')).hide(500);
$('#ContenidoTattoos').show(500);
});
});
<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>