[Blogspot / Blogger / 구글 블로그] 더보기, 숨기기 버튼 만들기

[Blogspot / Blogger / 구글 블로그] 더보기, 숨기기 버튼 만들기

  오전 1:35    홍다슬

---

스포일러나 등 바로 보여주고 싶지 않은 내용을 쓰고 싶을 때,
버튼을 눌러야만 내용을 볼 수 있도록 작성하는 방법이다.

<div>
    <input value="더보기" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = '숨기기';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = '더보기';}" type="button" />
    <div style="display: none;"> 내용이 나옵니다. </div>
</div>

형광펜 친 부분은 누를때마다 토글되는 문구로, 원하는 문구를 넣으면 된다.

이 소스를 HTML로 바꿔 입력하면, 아래 결과가 나온다.

내용이 나옵니다.

참고로 위 예제는 내용이 아래로 나오고,
혹시 위로 나오게 하고 싶다면 단순히 내부 input과 div 태그의 순서를 바꾸면 된다.
결과는 아래와 같다.

내용이 나옵니다.

추가로, 몇몇 테마는 내용에서는 제대로 잘 되지만
블로그 홈의 요약 보기에서 결국 위 작업을 해도 내용이 나와버리는데,
이것은 자체 기능인 점프 브레이크를 이용하면 막을 수 있다.

글쓰기 화면의 상단에 있다.

이것을 클릭해보면 커서 위치에 아래 그림과 같은 회색 선이 생긴다.

HTML 입력창에서
<!--more--><br />
를 입력해도 동일한 효과가 나타난다.


참고사이트:

http://bloggerunlocker.blogspot.com/2015/03/the-spoiler-has-function-to-hide-and.html

http://hfkais.blogspot.com/2009/10/blogger-read-more.html?showComment=1306981503560#c8468113147933102277