구글블로거 더보기 설정

[ 접기 ]와 [ 펼치기 ]를 구현해 주는 자바스크립트와 태그 설정

---

<script>

function fnMore1()

{

  document.getElementById("divMore").style.display="";

  document.getElementById("bMore").style.display="none";

}

function fnMore2()

{

  document.getElementById("divMore").style.display="none";

  document.getElementById("bMore").style.display="";

}

</script>

---

① 구글블로그 (블로그스팟)에서 글쓰기의 HTML모드로 들어가서
일단 위의 자바스크립트를 삽입한다.
② 다음은 표현된 게시글에서 펼치기를 동작시킬 수 있는
버튼을 만들어 주어야 하는데.
그냥 <b> 태그에 함수를 호출하는 식으로 처리
[ 내용 펼치기... ]라고 대충 써 주고 <b>태그로 감싸주면 됨.

---

<br /><b id="bMore" onclick="fnMore1()" 

 style="color: orangered; cursor: pointer; font-size: 10pt; font-weight: normal;"> 

    내용 펼치기...

</b><br />

---

③ ②의 버튼이 클릭되면 함수 fnMore1()이 호출되면서
아래 <div>태그의 스타일 속성 中 display의 속성값이 "none"에서 ""로 변경된다.

display의 속성값 中

"none"은 아예 <div> 태그로 처리된 블럭이 사라짐

"none"에서 ""으로 치환되면 기본값인 "block"속성이 되어

사라진 것이 드러난다.

"hidden"이라는 속성을 사용하면

블럭 자체의 공간은 유지하면서 내용만 감춰진다.

"hidden"에서 ""으로 치환되면 기본값인 "visible"속성이 되어

감췄던 내용이 드러난다.

즉, 블럭none 처리로 감출 <div> 블럭의 내용을 이어서 삽입하고

태그에 자바스크립트의 함수로 받아온 속성값을 갈아치우면 처리가 완성.

---

<div id="divMore" style="display: none;">

  블라 블라 블라 이 부분에 넣고싶은 내용을 넣으면 된다.

<br /><b onclick="fnMore2()" 

  style="color: orangered; cursor: pointer; font-size: 10pt; font-weight: normal;"> 

    접기...

</b>

</div>

---

④ ③의 <div> 블럭 내부 하단에 ②에서 사용한 방식을 응용하여
반대로 동작하는 [ 접기... ]를 설정해 주면 끝이다.