간단하게 구현해본 FAQ 형식의 코드입니다.
실무에서 일하시면서 매우 자주 접하는 형식 중 하나일 것이라 생각되어 만들어봤습니다. 🙂
html markup
|
1 2 3 4 5 6 7 8 9 10 |
<dl id="faq1"> <dt>question1</dt> <dd>answer1</dd> <dt>question2</dt> <dd>answer2</dd> <dt>question3</dt> <dd>answer3</dd> <dt>question4</dt> <dd>answer4</dd> </dl> |
javascript
|
1 2 3 4 5 6 7 8 9 10 |
$.fn.setFaq = function() { return this.each(function(i, elm) { $elm = $(elm); $elm.find("dd").hide() .end().delegate("dt", "click", function() { $(this).next().slideToggle(200) .end().toggleClass("on"); }); }); }; |
Here is the TEST CODE
http://jsfiddle.net/rootbox/uD89q/
즐거운 코딩되세요~ 🙂
엌 이…이건 뭔가요?
알수 없는 어려운 글자들이 @_@
엌. 왜이러시나요. -ㅅ-