매뉴얼

Home 매뉴얼 내용접기

* 기본형

내용접기 기능을 넣을 버튼에 class="toggleBox" 를 추가한다.

내용박스에 class="thisBox" 를 추가한다.

<div>
	<span class="toggleBox">내용접기 버튼</span>
	<div class="thisBox">
		내용입니다.
	</div>
</div>

내용접기 버튼

내용입니다.

* 응용 (대제목 넣기에 활용하기)

내용접기 기능을 넣을 버튼(h1)에 class="toggleBox" 를 추가한다.

<h1 class="toggleBox"><span>비전</span> 선언문 <i>Vision Statement</i></h1>

내용부분이 여러항목으로 구성될경우 div 로 둘러싼다.

<div class="thisBox">
	<p class="p1">우리는 청소년들이 ...</p>
	<p class="p2">That youth would mature ...</p>
</div>

(주의!) 큰 div 하나당 내용접기를 하나씩만 사용한다. (한페이지에 여러내용을 접을 경우 각각 큰 div 로 묶어줌)

<div>
	내용접기 버튼1
	내용박스1
</div>
<div>
	내용접기 버튼2
	내용박스2
</div>

* 처음부터 펼쳐져있고 누르면 접힐 경우에는 class="thisBox on" 을 사용한다.

비전 선언문 Vision Statement

우리는 청소년들이 온전한 인간으로 성장하여 건강하고 행복한 삶을 누리고 이웃과 민족, 세계를 위한 일꾼으로 세워질 수 있도록 돕는다.

That youth would mature into well balanced human beings that they might enjoy a healthy, happy and full life as leaders who dedicate themselves to Gods Kingdom and this world.