espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW. Hace lo que quiero, pero creo que se puede simplificar, pensaría que es lo correcto. Del ejemplo que puse esta seria la parte : $("#div-prueba-1").on('click', function () { $("#div-prueba-1").toggleClass("show"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-2").on('click', function () { $("#div-prueba-2").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-3").on('click', function () { $("#div-prueba-3").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-4").on('click', function () { $("#div-prueba-4").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); }); ----- <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("#div-prueba-1").on('click', function() { $("#div-prueba-1").toggleClass("show"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-2").on('click', function() { $("#div-prueba-2").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-3").on('click', function() { $("#div-prueba-3").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-4").toggleClass("hide"); }); $("#div-prueba-4").on('click', function() { $("#div-prueba-4").toggleClass("show"); $("#div-prueba-1").toggleClass("hide"); $("#div-prueba-2").toggleClass("hide"); $("#div-prueba-3").toggleClass("hide"); }); <!-- language: lang-css --> .box-general { background-color: #f4f4f4; width: 100%; height: 100vh; position: relative; } .box-general .box-cont { transition: all 0.6s linear; width: 25%; position: absolute; top: 0; bottom: 0; z-index: 1; } .box-general .box-cont.show { width: 100%; left: 0; } .box-general .box-cont.hide { visibility: hidden; opacity: 0; } .box-general>div:first-child { background-color: #cccccc; left: 0; } .box-general>div:nth-child(2) { background-color: #999999; left: 25%; } .box-general>div:nth-child(3) { background-color: #666666; left: 50%; } .box-general>div:last-child { background-color: #333333; left: 75%; } <!-- language: lang-html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box-general"> <div id="div-prueba-1" class="box-cont"> <div class="box-display"></div> <div class="cont-inter"> Contenido </div> </div> <div id="div-prueba-2" class="box-cont"> perro 2 </div> <div id="div-prueba-3" class="box-cont"> perro 3 </div> <div id="div-prueba-4" class="box-cont"> perro 4 </div> </div> <!-- end snippet -->