Toggle 쉽게 구현하기

대댓글 작성을 클릭시 나타나게 하거나 그외 클릭시 원하는 정보를 출력하기 위해 Toggle 을 많이 사용합니다.

구현 방법은 기본(default)스킨에서 제공되는 기능을 가져왔습니다.

 


 

<a href="#" onclick="jQuery('#jobdeok').toggle(300); return false;" >클릭</a>

<div id="jobdeok">출력할 정보</div>

[수정할 부분]

jQuery(‘#jobdeok‘).toggle(300); return false;” >클릭

id=”jobdeok”>출력할 정보

 

*.css

#jobdeok {display: none;}

 


 

ID 및 클래스(#jobdeok .jobdeok)로 사용할 수 있습니다.

XE 반복문 내에서 사용하게 될 경우 단순히 ID/클래스를 단어(#jobdeok)만 사용하면 토글이 동작하지 않습니다.
* ID일 경우는 동작하지 않지만 클래스로 사용할 경우 동일 클래스명 전체가 작동할 수 있습니다.

{$comment->comment_srl} 등 맞춰서 동작할 수 있도록 변수값을 넣습니다.
이 경우 단순히 변수값만 넣게되면 다른 동작들과 충돌할 수 있습니다.
jobdeok{$comment->comment_srl} 같이 단어(숫자제외)+변수 조합으로 하시길 권장해드립니다.

display: none; 스타일 설정이 되어 있어야 클릭 이벤트시 display:black 이 되면서 토글이 정상동작하게 됩니다.
(CSS에 넣어 사용하는걸 권장합니다.)

.toggle(300) 값을 넣어주게 되면 슬라이드 효과를 줄 수 있습니다.
(값이 적을수록 빠르게 동작합니다. 0 또는 비워두게 되면 효과 없음)

return false; 를 넣는 이유는 해당 코드가 없게 되면 클릭했을시에 href=”#”를 찾아가게 됩니다.
만약 href=”#” 대신 ID/클래스와 동일한 값을 넣게 될경우 return false; 없이 토글이 동작되지만 이동 + 토글 동작을 합니다.
이동 + 토글 동작은 화면이 움직이면서 토글이 되기 때문에 별로 좋지 못한 효과를 보게 됩니다.
그래서 return false; 를 넣고 href=”#” 처리를 해야합니다.

* return false; 는 기본 속성(A태그일 경우 href=””)을 무시해주는 기능입니다.

 

DEMO

 

댓글 남기기