사이트나 블로그 글 접기 펼치기 html 코드
가끔 어떤 블로그들을 보면 글 중간이나 하단에 "더 보기" 버튼이나 "펼치기" 버튼을 누르면 숨겨져 있는 글들을 볼 수 있게 작성된 글들이 있죠. 민감한 글들이나 바로 보여주기 힘든 글들을 이런 식으로 한 번 숨긴 후 읽는 사람으로 하여금 볼 것인지 말 것인지 선택하게 만드는 작성 방식입니다. 굳이 쓸 필요가 없는 기능일 수도 있지만 블로그의 재미를 위해서나 이벤트를 위해서 가끔은 필요한 기능이기도 합니다.
네이버 블로그나 티스토리 블로그에서는 애초에 글 접기펼치기 기능을 제공하고 있습니다. 네이버 블로그에서는 "요약" 버튼이 있고 티스토리에는 "접은 글"이라는 기능이 있는데 둘 다 동일하게 내용을 접어 놓고 안 보이게 한 후 마우스로 클릭하면 내용을 보여주는 방식입니다. 방식도 간단해서 버튼 클릭 후 내용을 적고 글을 발행하면 알아서 표시되기 때문에 블로그에서는 코드 필요 없이 간편하게 사용하실 수 있습니다.
그러나 웹사이트에서 접기펼치기 코드를 사용하는 경우, 혹은 블로그에서 제공하는 기능이 마음에 안 들 경우 직접 코드를 이용해서 사용하실 수 있습니다. html을 잘 아시는 분들께서는 조금 더 괜찮은 방식으로 꾸며서 커스텀 방식으로도 이용하실 수도 있습니다.
▼ 접기 펼치기 코드 테스트
글 접기 펼치기 코드는 테스트 해 봤는데 잘 작동됩니다. 접기 펼치기에 대한 내용들을 찾고 있던 중 인터넷에 있는 다양한 방법들을 살펴보고 개중 괜찮은 것들 몇 개를 짜 맞추기 해서 만든 코드입니다. 글 접기, 펼치기가 필요하신 분들은 사용해 보세요. 참고로 티스토리에서 사용하실 경우에는 기본모드말고 "html 모드"에서 바로 저장을 하셔야 정상 등록됩니다.
▼ 접기 펼치기 코드
<div>
<a href=#none id="show" onclick="if(hide.style.display=='none')
{hide.style.display='';show.innerText='▲접기'}
else {hide.style.display='none';show.innerText='▶펼치기'}">▶펼치기</a>
<div id="hide" style="display: none">
펼치면 보이는 내용을 적어줍니다. <br />
아무 내용이나 적어주세요. <br />
</div>
</div>코드 중 "펼치면 보이는 내용을 적어줍니다." 부분에 원하는 내용을 적어주시면 됩니다. 블로그 글을 복사가 안 되게 해 놓았기 때문에 텍스트 파일을 따로 올려 놓겠습니다. 다운로드하신 후 복사해서 블로그 글 작성에 사용해 보세요.
댓글