Кнопка показать / скрыть текст

187
23 июня 2019, 08:30

Сделал кнопку показать / скрыть текст, но как сделать так чтобы при нажатии на кнопку "скрыть текст", экран возвращался к тому месту где была нажата кнопка "показать текст" (сейчас экран остается там где была кнопка скрыть при открытом тексте)?

Код html:

<span id="show-more">ЧИТАТЬ ПОДРОБНЕЕ</span>
<span id="show-less">Скрыть</span>

Код js:

$('#show-more-content').hide();
$('#show-more').click(function(){
$('#show-more-content').show();
$('#show-less').show();
$(this).hide();
});
$('#show-less').click(function(){
$('#show-more-content').hide();
$('#show-more').show();
     $(this).hide();
});
Answer 1

Использовал jQuery

$('#show-more-content').hide(); 
 
$('#show-more').click(function() { 
  $('#show-more-content').show(); 
  $('#show-less').show(); 
  $(this).hide(); 
}); 
 
$('#show-less').click(function() { 
  $('#show-more-content').hide(); 
  $('#show-more').show(); 
  $(this).hide(); 
 
  $("#show-more")[0].scrollIntoView(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
------------- 
<span id="show-more">ЧИТАТЬ ПОДРОБНЕЕ</span> *** *** 
<span id="show-less">Скрыть</span> -------------

READ ALSO
Проблема с границей сайта в мобильной версии

Проблема с границей сайта в мобильной версии

Отчего могла возникнуть ситуация, как на видео? Сайт продолжается за футеромСсылка на видео

214
Как поставить такой градиент на текст?

Как поставить такой градиент на текст?

столкнулся с интересным дизайнерским решениемТекст имеет эффект градиента

203
Как адаптировать сайт под все мобильные устройства?

Как адаптировать сайт под все мобильные устройства?

Как адаптировать сайт под все мобильные устройства?

219
Ошибкак 404 при попытке создать GET запрос в javascript

Ошибкак 404 при попытке создать GET запрос в javascript

Имеется три файла (взято из примера: https://openclassroomscom/en/courses/3523261-use-javascript-in-your-web-projects/3759261-make-your-first-ajax-request)

183