如何用一个函数替换jQuery中的.onclick()

$(".info-1").on("click", function() {
    $("#service-2").css("visibility", "hidden");
    $("#service-4").css("visibility", "hidden");
    $(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-2").css("visibility", "visible");
        $("#service-4").css("visibility", "visible");
    });
});
$(".info-2").on("click", function() {
    $("#service-1").css("visibility", "hidden");
    $("#service-3").css("visibility", "hidden");
    $(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-1").css("visibility", "visible");
        $("#service-3").css("visibility", "visible");
    });
});
$(".info-3").on("click", function() {
    $("#service-4").css("visibility", "hidden");
    $("#service-2").css("visibility", "hidden");
    $(".info-1").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-2").css("visibility", "visible");
        $("#service-4").css("visibility", "visible");
    });
});
$(".info-4").on("click", function() {
    $("#service-1").css("visibility", "hidden");
    $("#service-3").css("visibility", "hidden");
    $(".info-2").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-1").css("visibility", "visible");
        $("#service-3").css("visibility", "visible");
    });
});

.services-border {
  width: 100%;
  height: 540px;
}
/* line 40, ../scss/_content.scss */
.services-border > .services {
  width: 1240px;
  height: 270px;
  left: 50%;
  position: absolute;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* line 46, ../scss/_content.scss */
.services-border > .services > .right {
  float: right;
}
/* line 48, ../scss/_content.scss */
.services-border > .services > .right > .service-info {
  right: 0;
}
/* line 51, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info {
  left: 0;
}
/* line 53, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info > .border {
  float: right;
  margin-right: 10px;
}
/* line 59, ../scss/_content.scss */
.services-border > .services > .left {
  float: left;
}
/* line 61, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info {
  right: 0;
}
/* line 63, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info > .border {
  float: left;
  margin-left: 10px;
}
/* line 69, ../scss/_content.scss */
.services-border > .services > .service {
  width: 620px;
  height: 270px;
}
/* line 72, ../scss/_content.scss */
.services-border > .services > .service > .service-info {
  position: absolute;
  z-index: 1;
  margin-top: 30px;
}
/* line 76, ../scss/_content.scss */
.services-border > .services > .service > .service-info > img {
  float: left;
}
/* line 79, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text {
  float: left;
  width: 480px;
  margin-left: 30px;
  color: #3f4147;
  font-size: 11pt;
  font-family: "GothamProReg";
}
/* line 86, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > span {
  display: inline-block;
}
/* line 89, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > h4 {
  width: 400px;
  font-size: 14pt;
  font-family: "GothamProBold";
  text-transform: uppercase;
  margin-bottom: 15px;
  line-height: 20px;
}
/* line 97, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul {
  list-style-type: circle;
  color: #a70c5d;
  margin-left: 15px;
}
/* line 102, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #a70c5d;
  float: right;
  text-align: center;
  font-family: "BanderaProBold";
  vertical-align: bottom;
  line-height: 25px;
  font-size: 16pt;
  background: #fff;
}
/* line 114, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > [class^="info"]:hover {
  background: #a70c5d;
  color: #fff;
  cursor: pointer;
}
/* line 120, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > ul > li > span {
  color: #3f4147;
}
/* line 123, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > *:not(h4) {
  line-height: 25px;
}
/* line 128, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info {
  width: 630px;
  height: 540px;
  top: 0;
  position: absolute;
  z-index: 10;
  display: none;
  background: #fff;
}
/* line 136, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text {
  margin-top: 45px;
}
/* line 138, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > span {
  width: 60px;
  font-family: "GothamProBlack";
  font-size: 10pt;
  float: left;
  height: auto;
  margin-top: 25px;
  text-transform: uppercase;
}
/* line 147, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text {
  width: 490px;
  margin-left: 30px;
  float: left;
}
/* line 151, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > h4 {
  font-family: "GothamProBold";
  font-size: 14pt;
  text-transform: uppercase;
  line-height: 20px;
}
/* line 157, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-text > p {
  font-family: "GothamProReg";
  font-size: 13pt;
  margin-top: 20px;
  line-height: 20pt;
}
/* line 164, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price {
  width: 480px;
  float: left;
  margin-left: 30px;
  margin-top: 25px;
}
/* line 169, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul {
  width: 480px;
  float: left;
}
/* line 172, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(1) {
  font-size: 13pt;
  font-family: "GothamProBold";
}
/* line 176, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(2) {
  margin-top: 5px;
  font-size: 11pt;
  font-family: "GothamProReg";
}
/* line 181, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) {
  margin-top: 20px;
  font-family: "GothamProReg";
  font-size: 11pt;
}
/* line 185, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul:nth-child(3) .large {
  font-size: 16pt;
}
/* line 189, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > ul > li {
  float: left;
  width: 150px;
}
/* line 194, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .service-detail-info-text > .service-price > button {
  margin-top: 30px;
}
/* line 199, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border {
  height: 200px;
  width: 0;
  position: relative;
  margin-top: 20px;
}
/* line 204, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after, .services-border > .services > .service > .service-detail-info > .border:before {
  top: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
/* line 213, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:after {
  border-width: 6px;
  margin-top: -6px;
}
/* line 217, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border:before {
  border-width: 7px;
  margin-top: -7px;
}
/* line 222, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right {
  border-right: 1px solid #a70c5d;
}
/* line 224, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after, .services-border > .services > .service > .service-detail-info > .border-right:before {
  left: 100%;
}
/* line 227, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:after {
  border-left-color: #fff;
}
/* line 230, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-right:before {
  border-left-color: #a70c5d;
}
/* line 234, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left {
  border-left: 1px solid #a70c5d;
}
/* line 236, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after, .services-border > .services > .service > .service-detail-info > .border-left:before {
  right: 100%;
}
/* line 239, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:after {
  border-right-color: #fff;
}
/* line 242, ../scss/_content.scss */
.services-border > .services > .service > .service-detail-info > .border-left:before {
  border-right-color: #a70c5d;
}
/* line 248, ../scss/_content.scss */
.services-border > .services > .service > .second-row > .border {
  margin-top: 290px;
}
/* line 252, ../scss/_content.scss */
.services-border > .services > .service:hover {
  cursor: default;
}
/* line 254, ../scss/_content.scss */
.services-border > .services > .service:hover #docs {
  background: url("../img/sprite.png") -40px 0;
}
/* line 257, ../scss/_content.scss */
.services-border > .services > .service:hover #notebook {
  background: url("../img/sprite.png") -40px -41px;
}
/* line 260, ../scss/_content.scss */
.services-border > .services > .service:hover #target {
  background: url("../img/sprite.png") -42px -80px;
}
/* line 263, ../scss/_content.scss */
.services-border > .services > .service:hover #court {
  background: url("../img/sprite.png") -42px -122px;
}
/* line 266, ../scss/_content.scss */
.services-border > .services > .service:hover:last-child {
  right: 0;
}
/* line 272, ../scss/_content.scss */
.services-border #docs {
  width: 40px;
  height: 41px;
  background: url("../img/sprite.png") 0 0;
}
/* line 277, ../scss/_content.scss */
.services-border #notebook {
  width: 40px;
  height: 39px;
  background: url("../img/sprite.png") 0 -41px;
}
/* line 282, ../scss/_content.scss */
.services-border #target {
  width: 42px;
  height: 42px;
  background: url("../img/sprite.png") 0 -80px;
}
/* line 287, ../scss/_content.scss */
.services-border #court {
  width: 42px;
  height: 42px;
  background: url("../img/sprite.png") 0 -122px;
}

<section class="services-border">
            <div class="services">
                <div id="service-1" class="service left">
                    <div class="service-info">
                        <img id="docs" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-1 btn">
                                <span>i</span>
                            </button>
                            <h4>Наведение порядка<br> в делах</h4>
                            <span>Аудит документов и платежей на предмет:</span>
                            <ul>
                                <li><span>соблюдения необходимых формальностей ипроцедур,</span></li>
                                <li><span>наличия всех оригиналов договоров, актов,</span></li>
                                <li><span>легализация зависших платежей.</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="service-detail-info">
                        <div class="border border-left"></div>
                    </div>
                </div>
                <div id="service-2" class="service right">
                    <div class="service-info">
                        <img id="notebook" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-2 btn">
                                <span>i</span>
                            </button>
                            <h4>Оптимизация<br> договорных отношений </h4>
                            <ul>
                                <li><span>Доработка, латание дыр и улучшение условий основных типовых договоров вашей компании</span></li>
                                <li><span>Оформление сотрудников на оптимальных условиях ведения деятельности и налогообложения</span></li>
                                <li><span>Составление договоров, соглашений о конфиденциальности, публичных офферт</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="service-detail-info">
                        <div class="border border-right"></div>
                        <div class="service-detail-info-text">
                            <span>Услуга</span>
                            <div class="service-text">
                                <h4>Оптимизация<br>
                                    договорных отношений</h4>
                                <p>Борьба внутри меня, и я был в самых разных
                                    ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
                                    у меня на постоянной основе, это просто пробовать
                                    и быть лучше.</span></p>
                                <p>Есть определенная разница между публичным человеком и обычным человеком,
                                    это как сойти с ума - для меня во всяком случае - открыть себя целиком
                                    для всего мира. </p>
                            </div>
                            <span>Цена</span>
                            <div class="service-price">
                                <ul>
                                    <li>< 50</li>
                                    <li>50-100</li>
                                    <li>> 100</li>
                                </ul>
                                <ul>
                                    <li>Сотрудников</li>
                                    <li>Сотрудников</li>
                                    <li>Сотрудников</li>
                                </ul>
                                <ul>
                                    <li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
                                    <li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
                                    <li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
                                </ul>
                                <button class="btn btn-small">
                                    <span>Заказать</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="service-3" class="service left">
                    <div class="service-info">
                        <img id="target" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-3 btn">
                                <span>i</span>
                            </button>
                            <h4>Правовое сопровождение<br> деятельности (юрист-аутсорсер)</h4>
                            <ul>
                                <li><span>Участие в заключении договоров: минимизация рисков, усиление ваших позиций</span></li>
                                <li><span>Юридическая консультация</span></li>
                                <li><span>Дайджест предпринимательских ИТ-новостей с разъяснениями</span></li>
                                <li><span>Представительство интересов в судах</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="service-detail-info second-row">
                        <div class="border border-left"></div>
                    </div>
                </div>
                <div id="service-4" class="service right">
                    <div class="service-info">
                        <img id="court" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-4 btn">
                                <span>i</span>
                            </button>
                            <h4>Разработка договоров<br> и другой документации</h4>
                            <p>К сожалению, конфликты бывают в любой сфере. Если дело близится к суду или уже дошло до него,
                                мы поможем отстоять ваши права и интересы.</p>
                        </div>
                    </div>
                    <div class="service-detail-info second-row">
                        <div class="border border-right"></div>
                        <div class="service-detail-info-text">
                            <span>Услуга</span>
                            <div class="service-text">
                                <h4>Оптимизация<br>
                                    договорных отношений</h4>
                                <p>Борьба внутри меня, и я был в самых разных
                                    ситуациях в моей жизни. <span class="bold">Таким образом, борьба, что
                                    у меня на постоянной основе, это просто пробовать
                                    и быть лучше.</span></p>
                                <p>Есть определенная разница между публичным человеком и обычным человеком,
                                    это как сойти с ума - для меня во всяком случае - открыть себя целиком
                                    для всего мира. </p>
                            </div>
                            <span>Цена</span>
                            <div class="service-price">
                                <ul>
                                    <li>< 50</li>
                                    <li>50-100</li>
                                    <li>> 100</li>
                                </ul>
                                <ul>
                                    <li>Сотрудников</li>
                                    <li>Сотрудников</li>
                                    <li>Сотрудников</li>
                                </ul>
                                <ul>
                                    <li>от <span class="bold"><span class="large">5000</span> грн.</span></li>
                                    <li>от <span class="bold"><span class="large">15000</span> грн.</span></li>
                                    <li>от <span class="bold"><span class="large">25000</span> грн.</span></li>
                                </ul>
                                <button class="btn btn-small">
                                    <span>Заказать</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>