웹프로그래밍) 더보기/접기 구현

[ 개요 ]

티스토리 글쓰기에서 쓸 수 있는

더보기/접기 기능을 구현해보았습니다.

---

[ 사용해보기 ]

더보기입니다.

---

[ 코드 ]

---

[ 코드해석 ]

* ml = moreless

* btn = button

* <img src="./더보기.png">

이미지 파일을 html파일과 같은 위치에 놓아야

예시자료와 같이 정상적으로 표시된다.

1. 버튼(btn/mlb1)과 구간(area/mla1)으로 나눈다.

(* 더보기/접기를 적용할 요소를 div로 감싼다.)

2. 구간의 초기상태는 display:none;이다.

(* 펼쳐놓고 싶으면, display:block;으로 한다.)

3. 더보기 버튼 클릭 시, 구간의 display상태에 따라

더보기 or 접기로 전환되는 것이다.

4. mlb1에 이벤트리스너를 붙여서,

클릭했을때, moreless함수를 동작시킨다.

(* 해당 함수에는 버튼과 구간 요소(element)를

인자(파라미터)로 넣는다.)

* 또는 id문자열을 인자로 집어넣고,

함수에서 element를 찾게 할 수도 있음

5. 버튼과 구간에 고유의 id를 적절히 부여함으로써

짝을 지어 움직일 수 있도록 한다.

(* mlb1과 mla1, mlb2와 mla2 ...)

6. Script는 더보기/접기의

전환 기능이 동작하도록 해준다.

* 실질적인 요소배치는

HTML구간에서 이루어진다.

7. class는 CSS로 해당 요소를 꾸미는데 사용된다.