더보기 기능 구현

위와 같이 더보기 버튼을 누르면 나머지 내용이 나오는 버튼을 구현해 보려고 한다.

html의 코드는 다음과 같다.

<h1>애국가 가사</h1>
<p id="container">
 동해물과 백두산이 마르고 닳도록
 하느님이 보우하사 우리나라 만세
 무궁화 삼천리 화려강산
 대한 사람 대한으로 길이 보전하세
 남산 위에 저 소나무 철갑을 두른 듯
 바람서리 불변함은 우리 기상일세
 무궁화 삼천리 화려강산
 대한 사람 대한으로 길이 보전하세
 가을 하늘 공활한데 높고 구름없이
 밝은 달은 우리 가슴 일편단심일세
</p>
<button id="btn">더보기<strong> ∨</strong></button>

container라는 id를 가진 p태그에 가사를 넣고 button태그로 더보기 버튼을 생성해준다.

 #container{
      display: inline;
}

#btn{
      border: none;
      background-color: transparent;
      padding: 0;
      font-size: 15px;
      cursor: pointer;
}

#btn.hidden{
      display: none;
}

p태그는 inline의 속성을 가지게 될것이다.
button태그에는 디자인을 빼고 더보기라는 글자만 남겨주었다.
나중에 더보기 버튼을 누르고 나면 버튼이 사라져야 하므로 hidden이라는 속성도 하나 추가해준다.

<script>
    var container = document.getElementById("container")
    var btn = document.getElementById("btn")
    var full = container.textContent
    var less = full.substring(0,50) + "..."

    container.textContent = less
        
    btn.addEventListener('click',function(){
        container.textContent = full
        btn.classList.add('hidden')
   })
</script>

각 id를 가진태그들을 getElementById로 가져와준다.
full이라는 것은 container의 글자들을 의미하고 less는 full에서 50개까지의 문자들을 추출하여 뒤에 ...을 붙인다 less가 더보기 버튼이 붙게 될 글자가 줄여진 상태?이다.

container.textContent로 페이지가 처음 로드되었을때 보여질 기본상태를 less로 설정해준다.

btn에 addEvent로 클릭하면 기본상태가 full로 바뀌게 하고 hidden이라는 클래스가 추가되어서 버튼이 더이상 보이지 않게 해준다.

기본 상태

버튼을 눌렀을때

좀 어설프지만 완성~!ㅜㅜ
line-height를 주면 간격이 좀 떨어질것이다...

좀 나은가용??