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` <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(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); }); }); <!-- language: lang-html --> <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> <!-- end snippet -->