[алексей 111]

всем прив! разработчики сайта оставили один на один с кодом... приходится как-то разбираться...

Итак, есть блок, раскрывающийся по ссылке "читать далее", при повторном нажатии на неё - блок сворачивался. код JS:

$('.main-card__read').click(function(e) {
	$('.main-card__text').addClass('open'
	$(this).hide(); //удаляет ссылку из кода после нажатия
	e.preventDefault();
});

Я добавил ссылку "свернуть", через CSS - скрытие и показ обеих ссылок, такой код JS получился:

$('.main-card__read').on('click', function(e) {
		if ($('.main-card__text').hasClass('open')) {
			$('.main-card__text').removeClass('open');
			$('.main-card__read').removeClass('open');
			$('.main-card__read_1').removeClass('open');
		}	else {
			$('.main-card__text').addClass('open');
			$('.main-card__read').addClass('open');
			$('.main-card__read_1').addClass('open');
		}
		e.preventDefault();
	});

	$('.main-card__read_1').on('click', function(e) {
		if ($('.main-card__text').hasClass('open')) {
			$('.main-card__text').removeClass('open');
			$('.main-card__read').removeClass('open');
			$('.main-card__read_1').removeClass('open');
		}	
		e.preventDefault();
	});

В итоге два скрипта - первый скрипт на на нажатие "читать далее", второй скрипт на нажатие кнопки "свернуть"...
1. как это все можно (и можно ли?) закинуть в один скрипт? Т.е. чтобы при нажатии на 1-ю кнопку текст разворачивался, надпись ссылки менялась.
2. можно ли сделать, чтобы для мобильных этот же скрипт работал не по выцеливанию надписи на ссылке, а по нажатию на сам блок?
(т.е. в функцию клика вместо ".main-card__read" можно вставить ".main-card" - тогда как раз срабатывание по блоку будет, но как разделить это по размеру экрана - не понимаю...)

на всякий случай HTML и CSS

Код HTML:

<div class="main-card">
	<div class="main-card__pict"><img src="img/card-pict/card-pict-5.png" alt=""></div>
	<div class="main-card__descr">
		<div class="main-card__title">Аэротруба "Аэродинамика" на Юго-Западной - это целый мир экстрим развлечений в одном месте</div>
		<ul class="main-card__list">
			<li style="font-weight: 400;">Кроме самого полета вы сможете:</li>
			<li style="font-weight: 400;">Уничтожить всех немецких асов в "Битве за Берлин"</li>
			<li style="font-weight: 400;">Покорить на горных лыжах Эверест и Эльбрус</li>
			<li style="font-weight: 400;">Устроить Экстрим-Праздник для любой компании</li>
		</ul>
	</div>
	<div class="main-card__text">
		<p>Летите, как птицы, рулите, как шумахеры, пилотируйте, как покрышкины</p>
		<p style="font-weight: 700">текст...</p>
		<p>текст...</p>
		<p>текст...</p>
		<p>текст...</p>
		<p>текст...</p>
	</div>
	<a id="click" href="#" class="main-card__read">Читать далее...</a>
	<a id="click" href="#" class="main-card__read_1">Свернуть</a>
</div>

код CSS:

.main-card__text {
  height: 77px;
  font-size: 16px;
  font-weight: 300;
  color: #1b1b1b;
  overflow: hidden;
  clear: both;
}

.main-card__text.open {
  height: auto;
}

.main-card__read {
  display: block;
  margin-top: 10px;
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 800;
  color: #239ed7;
}

.main-card__read.open {
  display: none;
}

.main-card__read:hover {
  color: #239ed7;
  text-decoration: underline;
}

.main-card__read_1 {
  display: none;
  margin-top: 10px;
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 800;
  color: #239ed7;
}

.main-card__read_1.open {
  display: block;
}

.main-card__read_1:hover {
  color: #239ed7;
  text-decoration: underline;
}