Написал код по видео и переделал его под себя. Изначально, вторая часть текста обернута спаном и ему задано свойство: display: none. При нажатии на кнопку display должен меняться на inline, чтобы появилась вторая часть текста.
А затем, при нажатии на кнопку второй раз этот span с текстом должен исчезать. Но срабатывает только первая часть плана: текст появляется. А дальше не фурычит.
В чем может быть дело?
код html:
<div class="text__container">
<p class="text-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum asperiores explicabo, et reprehenderit eum officiis! Nesciunt ea eaque deserunt nostrum omnis, asperiores eius quod inventore illo rerum eveniet, maxime cum?</p>
<p class="text-2" ><span id="more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti debitis temporibus laborum. Vel, non exercitationem animi doloremque ratione ab ullam, nemo quia laboriosam asperiores, repellat corrupti cum dolor harum necessitatibus.</span></p>
</div>
<button class"text__button" id="btn" onclick='readMore()'>Читать далее</button>
код css:
#more {
display: none;
}
код js:
function readMore(){
let more = document.getElementById('more');
let btn = document.getElementById('btn');
if(more.style.display === 'none'){
btn.innerHTML = 'Читать далее';
more.style.display = 'inline';
} else {
btn.innerHTML = 'Скрыть';
more.style.display = 'none';
}
}