He separado el `div`de 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $( document ).ready(function() { $('.mostrar div').hide(); }); $('div.men > div').on('click',function(){ if($(this).attr('id')=='depilacion' ){ $('.mostrar div#ContenidoDepilacion').toggle(); } if($(this).attr('id')=='lifting' ){ $('.mostrar div#ContenidoLifting').toggle(); } if($(this).attr('id')=='lipoescultura' ){ $('.mostrar div#ContenidoLipoescultura').toggle(); } if($(this).attr('id')=='tattoos' ){ $('.mostrar div#ContenidoTattoos').toggle(); } }); <!-- 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> <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> <!-- end snippet -->