‘읽기 더 많이’와 ‘읽기 적게’ 버튼을 만드는 방법

JavaScript를 사용하여 '읽기 더 많이 - 읽기 적게' 버튼을 만들어 보세요.

예시 텍스트

로렘 이플스 다마, 콘세크투르 아디피시링 엘리트. 파셀러스 이멀디에트, 누라 에트 딕투미 인터드룸, 니시 루메 레예스 비테 스켈 ... 에르奎스 엔임 리구라 벤넨네스 돌르. 막스케나스 니슬 에스트, 울트리케스 네콩게 에게트, 오이쓰르 빗 라 마사. 푸스케 루크투스 베스티브룸 오에우 야리켃 투아렛. 나운스 사기티스 딕투미 누시, 셰드 울라미코르 이플 디그니시스 아크. 인 앳 리보로 셰드 나운스 벤넨네스 이메르디에트 셰드 오르나레 투르피스. 돈체 비테 라 두이 에게 테illus 그라비다 벤넨네스. 인터링글라 푸린게 에로스 노 페르멘투스. 셀다 다피불 풀빈라르 니브 히브 티모르 포르타.

“更多 읽기”와 “적게 읽기” 버튼

단계 1 - HTML 추가:

<p>로렘 이플럼 dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
<button onclick="myFunction()" id="myBtn">읽기 더</button>

제2단계 - CSS 추가:

#more {display: none;}

제3단계 - JavaScript 추가:

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "읽기 더";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "읽기 적게";
    moreText.style.display = "inline";
  }
}

직접 시도해 보세요