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 -->