Можно ли сократить скрипт клика по кнопке

[алексей 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;
}

[Nexus]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Nexus]

разработчики сайта

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');
}

Вы уверены, что они "разработчики"?

Портянку что выше можно заменить этой строкой:

$('.main-card__text,.main-card__read,.main-card__read_1').toggleClass('open');

[алексей 111]

они все-таки - разработчики, портянка - это мое изобретение, почитал умные сайты, сделал - как смог у них-то код коротенький (самый верхний)
как сократить портянку - понял
в один-то код это все объединить можно? (т.е. чтоб дополнительный '.main-card__read_1' и клик на него не создавать)

[Nexus]

алексей 111, под шапкой этого сайта есть ссылка "Поиск", нажмите на нее и поищите слово "открывашка". Найдете не одно решение своей задачи.

[алексей 111]

Почитал, из двух скриптов сделал один, полотно убрал:

$('.main-card__read').on('click', function(e) {
		if ($('.main-card__text').hasClass('open')) {
			$('.main-card__text').removeClass('open');
			$('.main-card__read').text('читать далее...')
		}	else {
			$('.main-card__text').addClass('open');
			$('.main-card__read').text('свернуть...')
		}
		e.preventDefault();
	});

как сюда дописать вариант для мобильных - не нашел...
т.е. для маленького размера экрана, к примеру меньше 766px - чтобы на открытие и закрытие срабатывало не по нажатии на ссылку: ('.main-card__read'), а по нажатию на сам блок: ('.main-card')

[ruslan_mart]

Ещё короче:

$('.main-card__read').on('click', function(e) {
		$('.main-card__read').text(
			$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
		);
		e.preventDefault();
});

[алексей 111]

с сокращением разобрался, круто! спс!

этот скрипт работает при клике на ссылку.

если сделать:

$('.main-card').on('click', function(e) {
		$('.main-card__read').text(
			$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
			);
		e.preventDefault();
	});

то срабатывает при клике на блок 'div'
можно ли сделать, чтобы по 'div' срабатывало только при
@media only screen and (max-width: 767px).
Т.е. на большом экране - $('.main-card__read'), а экран меньше 767 - $('.main-card')

[алексей 111]

т.е. как-нибудь добавить (вопрос куда ):

if (size < 767) {
$('.main-card').on('click', function(e)
......
}

[ruslan_mart]

$('.main-card, .main-card__read').on('click', function(e) {
	if($(window).width() < 767 === $(this).is('.main-card')) {
		$('.main-card__read').text(
			$('.main-card__text').toggleClass('open').hasClass('open') ? 'свернуть...' : 'читать далее...'
		);
		e.preventDefault();
	}
});