사이드바에 더보기 기능 적용하기

이글은 이전에 발행된 글이지만 코드수정을 하면서 다시 갱신해서 발행합니다.
사이드바는 <s_sidebar> 로 시작해서 </s_sidebar> 끝이납니다. 또 <s_sidebar>다음에 써주는 주석이 곧 사이드바 제목이 됩니다. 자세한것은 티스토리 치환자를 살펴보세요.

그리고 하나의 메뉴 즉 카테고리,최근글,최근댓글등은 <s_sidebar_element>라는 치환자로 감싸집니다.
즉 

<s_sidebar_element> 카테고리 </s_sidebar_element> 

<s_sidebar_element> 최근글 </s_sidebar_element>

<s_sidebar_element> 최근댓글 </s_sidebar_element>

....이런 형태입니다. 이건 어느 스킨이다 다 똑같습니다.
사이드바에서 클릭하면 보여지고 , 다시 클릭하면 감쳐지는 부분 즉 본문에서 더보기 기능과 같은 기능을 알아보겠습니다.
이건 사이드바의 내용이 길때 아주 유용한 기능입니다. 우선 소스는 아래와 같습니다.

<div>
	<a href="javascript:void(0)" onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';">클릭하는부분</a>
	<div style="display: none;">
		감쳐지는부분
	</div>
</div>

코드하이라이팅이 완전치않아 텍스트 파일 첨부합니다.

더보기.txt

이제 사이드바에 적용하는 법을 알아보겠습니다.
사이드바의 대표적으로 사용하는것이 제목부분입니다. 저의 경우는 <h3>공지사항</h3> 이런식으로 사용하는데요.
이 h3 부분을 클릭하면 하위내용이 보이고 , 다시 클릭하면 감쳐지는걸 알아보겠습니다. 먼저 소스 날립니다.

<s_sidebar_element><!-- 공지사항 -->
<s_rct_notice><!-- 공지사항 리스트를 출력할 영역을 알려주는 치환자 -->
	<div id="notice">
		<div>
			<a href="javascript:void(0)" onclick="this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';">
			<h3>Notic</h3></a><div style="display: none;">
				<ul>
					<s_rct_notice_rep><!-- 공지사항 리스트를 반복 출력합니다 -->
						<li>
							<a href="[#\#_notice_rep_link_##]">[#\#_notice_rep_title_##]</a> 
						</li>
					</s_rct_notice_rep>
				</ul>
		</div>
	</div>
</s_rct_notice>
</s_sidebar_element>

텍스트 파일 첨부합니다.

공지사항더보기.txt

css 수정없이 바로 html 만 수정하면 더보기 기능이 부여된 기능을 사용할수 있습니다.
자 여기까지 완료되었습니다.
이로써 사이드바의 모든 부분에 적용할수 있고 , 보여주고 싶은 부분은 그냥 나두면 됩니다.

사이드바에 동일한 디자인으로 링크를 추가할때는 아래글을 참고하세요.

참고

사이드바 스킨수정팁 동일하게 관리하기
카테고리 펼쳐보이기
이미지 처리하는 방법(확장자)
이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
이미지 처리하는 방법(Image Replacement , Image Sprite)