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");
});
$("#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");
});
.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%;
}
<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>
[<>]
es casi como codepen, ahí te lo incluí