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

게시자: 대문 demun 카테고리: 티스토리스킨수정/사이드바 2010.12.16 16:08
이글은 이전에 발행된 글이지만 코드수정을 하면서 다시 갱신해서 발행합니다.
사이드바는 <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>

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



이제 사이드바에 적용하는 법을 알아보겠습니다.
사이드바의 대표적으로 사용하는것이 제목부분입니다. 저의 경우는 <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>

텍스트 파일 첨부합니다.



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

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

댓글

  1. 2012.10.31 01:31 신고 BlogIcon 코세이  댓글주소  수정/삭제  댓글쓰기

    아 ^^

    찾고있었는데, 감사합니다.

    방명록에도 글을 남겼었는데 답변은 주지 않으셔도 됩니다.

    감사합니다 ^^

    • BlogIcon 코세이 2012.10.31 01:49 신고  댓글주소  수정/삭제

      펼치고 접고 싶으신분은
      <div class="widget_content">
      <ul>

      에서

      <div class="widget_content sidebar_show">
      <ul>

      로 바꾸시면 펼치고 접으실수있습니다 ^