NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


jQuery를 이용하여 FAQ 목록 만들기.

본문 건너 뛰기

FAQ(Frequently Asked Question) 목록은 어떤 요소로 마크업 할 것인지가 가장 고민이 됩니다. 예를 들면 다음과 같은 다양한 마크업 방법이 있는데요.

  • ul > li > (p+p)
  • ul > li > (hx+p)
  • ul > li > dl > (dt+dd)
  • dl > (dt+dd) + (dt+dd) + (dt+dd) …
  • dl(dt+dd) + dl(dt+dd) + dl(dt+dd) …

오늘 제가 선택한 방법은 첫 번째 방법 이었습니다. 이 방법이 정답이라고 단적으로 말하기는 어렵고 다른 방법이 틀렸다고 말하기도 어렵습니다. HTML 구조에 정답이 있는것은 아니니까요. 하지만 제가 첫 번째 마크업을 선택한 이유를 설명드려 보겠습니다. 솔직히 말씀 드리자면 이 선택에 대한 확신은 아직 없습니다.

  • 질문과 답변 목록은 ‘목록’ 이기 때문에 일단 ‘ul, ol, dl’ 요소 가운데 하나를 사용하는 것이 적합하다고 판단 했습니다.
  • ‘ol’ 목록은 항목의 배치 순서에 의미가 있는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서를 바꿔도 의미가 달라지지 않는 비 순차 목록이라고 판단해서 제외 했습니다.
  • ‘ul’ 목록은 항목의 배치 순서에 의미가 없는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서에 의미가 없다고 판단해서 사용 했습니다.
  • ‘dl’ 목록은 정의 목록으로써 질문과 답변 형식에 사용해도 괜찮다고 판단 했지만 한 쌍의 ‘dt+dd’ 요소를 한 번 더 감싸주는 마크업이 필요한 경우 CSS 스타일을 적용하는데 제한이 발생하기 때문에 제외 했습니다.
  • ‘dl+dl’ 형식은 ‘dl’ 요소를 ‘항목의 그룹핑’ 아닌 단 하나의 ‘항목’에만 적용했기 때문에 의미에 맞지 않다고 판단해서 제외 했습니다.
  • ‘li > dl > (dt+dd)’ 형식은 목록 안에 또 다른 목록을 포함시키는 형태로써 하나의 항목을 두 번이나 목록 요소로 중첩 마크업 하는 것이 남용이라고 판단해서 제외 했습니다.
  • ‘ul > li > (p+p)’ 형식으로 마크업 하는 것은 ‘질문/답변’을 모두 각각의 문단으로 볼 수 있기 때문에 적합하다고 판단 했습니다. 그러나 ‘질문’과 ‘답변’을 동일한 요소 ‘p’로 마크업 했다는 점에서 여전히 뒷맛이 개운치가 않네요.
  • ‘li > (hx+p)’ 형식은 목록 안에 제목(hx) 요소가 들어가는 형태로써 의미상 가장 적합하다고 판단 했지만 목록 안에서 ‘hx’ 요소를 사용하는 것이 ‘hx’를 남용하는 것은 아닌지 구조의 적절함에 확신이 서지 않아서 제외 했습니다. 그러나 만약 ‘li>(p+p)’ 구조를 선택하지 않았다면 이것을 선택했을 것입니다.
  • 만약 한 쌍의 ‘(dt+dd)’ 요소를 ‘dl’ 요소로 직접 감싸는 대신 ‘di'(definition item)와 같이 한번 더 묶어주는 마크업 요소가 존재 했다면 저는 ‘dl’ 요소를 선택했을 것입니다. 제가 이상적이라고 생각하는 마크업 구조는 ‘dl > di > (dt+dd)’ 이런 구조 인데 ‘di’ 요소는 실제로는 존재하지 않는 요소이므로 착오 없으시길 바랍니다.
jQuery를 이용한 FAQ 목록 입니다. 이런 효과를 흔히 아코디언 효과(accordion effect)라고 부릅니다. 이 예제를 새 창으로 보기 | OUIF 페이지에 더 많은 예제들이 있습니다.

a 요소에 유효한 URL 사용하기

질문은 ‘a’ 요소로 마크업 되어 있고 ‘href’ 값으로는 유효한 ‘URL'(#a1, #a2, #a3 …)이 포함되어 있습니다. 유효하다는 것은 링크의 목적지가 존재하고 링크 주소를 따라가면 기대했던 자원이 있다는 것을 의미 합니다. 만약 누군가에게 특정 ‘질문/답변’ 항목을 링크 주소를 통해 알려주어야 한다면 여러분은 마우스 우측 버튼을 눌러 ‘링크 주소 복사’ 기능을 이용할 수 있을 것입니다. URL이 유효하지 않다면 이런 편의는 불가능한 일입니다. ‘href’ 값으로 의미 없는 값 ‘#’을 넣는다면 클릭 또는 키보드 Enter를 내리 쳤을 때 키보드 포커스는 페이지 맨 처음으로 이동해 버리기 때문에 화면 낭독기 사용자(시각 장애인)는 처음부터 다시 탐색을 시도해야 합니다. 유효한 URL을 작성하는 것은 사용성과 접근성을 모두 높여주는 일로써 되도록 모든 링크에는 유효한 URL 값을 포함해야 합니다.

관련글

분류: CSS,웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2010년 3월 26일, 1:15 | 정찬명 | 댓글: 52개 |
트랙백URI - http://naradesign.net/wp/2010/03/26/1265/trackback/

52개의 댓글이 있습니다.

  1. 희주 댓글:

    요즘 작성하신 포스트들을 보니 jQuery의 매력에 푹빠지셨군요~
    사용하면 사용할수록 재미있는 녀석입니다.
    저는 개인적으로 dl > (dt + dd) (dt + dd)가 의미적으로 맞다고 생각하는데 작업하다보면은 마크업이 이게 맞는경우도 있고 저게 맞는경우도 있고 하지요. 그럴땐 CSS 적용하기 유용한것을 선택하는게 답인거 같습니다.

  2. elles 댓글:

    와.. jQuery라는 놈.. 좀 대단한거같네요
    사실 저는 퍼블리셔로서;; 스크립트는 못 짜고..; 함수추가정도의 수정만 할줄아는 실력인데요;; 배운적도없어영;;;
    jQuery라는놈을 연구해볼까하는데.. 스크립트는 기본이겠죠? ㅜㅜ
    그런데요.. 여기 올려주신 소스보니까
    jQuery.js는 왜 외부문서로 불러서 사용하시나요? 궁금하네요~ 업데이트되기때문인가요?
    그리고
    외국사이트들 프로젝트투입예정인데요.. jQuery로 메뉴나 faq를 응용해볼까 생각중인데..
    치명적인 약점이 있을까요?
    음.. 너무 질문만했네요;;; 국내에 관련정보 포럼이 있으면 좋겠어요

  3. 정찬명 댓글:

    @희주

    자바스크립트 기초도 없던 제가 jQuery 이용 하는걸 보면 jQuery는 HTML/CSS 기반 지식이 있는 분들에게 정말 접근하기 쉬운 프레임웍이라는 생각이 듭니다. jQuery는 제게 새로운 세상이나 마찬가지죠.

    그리고 말씀하신 대로 FAQ 목록과 같은 콘텐츠는 충분히 상황에 따라서 마크업을 달리 할 수 있다고 생각합니다. ^^

  4. 정찬명 댓글:

    @elles

    저도 자바스크립트나 jQuery를 따로 시간내서 배운적은 없습니다. 옆자리 뒷자리 않은 동료들에게 조금씩 묻고 또 묻다 보니까 이제는 기본적인 인터렉션들을 조금씩 다룰 줄 알게 되었는데 이렇게 되기까지의 시간이 상당히 짧았습니다. 그만큼 배우기 쉽다는 이야기죠. ^^

    jQuery 링크를 외부문서로 사용하는것은 어디까지나 제가 제공하는 것들이 단순한 예제이기 때문이구요. 실제 서비스에 적용하실 때에는 다운 받아서 실행 서버에 올려야겠죠. 가장 최신 버전으로 업데이트 된 프레임웍을 이용하기 위해서 외부링크를 걸었던 것입니다.

    jQuery 에게 치명적인 약점이란 표현은 사용하기 어려울것 같구요. 다른 프레임웍과 비교해서 또는 자바스크립트 자체와 비교해 볼 때 장단점은 있을 것 같습니다. 예를 들면 HTML 구조나 CSS 선택자 사용법을 잘 모르는 사람이 jQuery를 ‘잘’ 이용하기는 조금 어려울 수 있는데 이런 것은 어떤 사람들에게는 jQuery의 약점 처럼 보일 수 있겠죠. 하지만 HTML/CSS 지식이 있는 사람에게 접근하기 쉬운 것은 분명한 장점 이겠구요.

  5. 김무건 댓글:

    ul > li > (p+p)
    ul > li > (hx+p)
    ul > li > dl > (dt+dd)
    dl > (dt+dd) + (dt+dd) + (dt+dd) …
    dl(dt+dd) + dl(dt+dd) + dl(dt+dd) …
    고민의 흔적이 많이 담겨 있군요 ㅋㅋ
    웹 퍼블리싱보다 태그고민하는게 더 힘든것 같습니다 -ㅅ-
    그리고 ‘답변 모두 여닫기’ 기능이 인상적이었습니다 :)

  6. 익명 댓글:

    활용해야하는 부분이었는데 여기서 새로운 것을 배우고 갑니다.^ ^
    들어올때마다 많은 정보를 담아가네요 감사합니다.
    jQuery를 많이 사용해서 저도 적용해보려고 했는데 jQuery부분의 css에서 아직 파악하는 정도라서 이렇게 쉽게 파악할 수 있게 해주서 좋네요^ ^

  7. 정찬명 댓글:

    @김무건
    네, 올바른 태그를 선택하는건 선택자 이름을 네이밍 하는 것 다음으로 어렵지요. 의견 감사합니다. ^^

  8. 정찬명 댓글:

    @익명
    예쁘게 바꿔서 사용해 주세요. 감사합니다. ^^

  9. m-sunny 댓글:

    저도 희주님처럼.. dl > (dt + dd) (dt + dd)가 의미적으로 맞다고 생각하는데 ^^; 작업하다보면 상황에 따라 틀려지기도 하더라고요^^;;
    큭.. 정말어떤태그를 써야하는지~ 고민하는게 더 힘든듯요..
    저도 jQuery의 매력에 빠져보고 싶어지네요^^;; 좋은 자료 감사합니다

  10. 정찬명 댓글:

    @m-sunny
    dl > (dt + dd) (dt + dd) 도 적절한 마크업이라고 생각 합니다. 저도 상황에 따라 다르게 선택하기도 하구요. jQuery 정말 재미있어요. ^^ 의견 감사합니다.

  11. 윤군 댓글:

    여기에 들릴때마다 신비로움을 느끼며 가는 1인입니다.ㅎㅎ
    저에겐 많은 도움이 되는 사이트 같아요~
    좋은 정보의 공유 감사드립니다! ^^

  12. 정찬명 댓글:

    @윤군
    윤군님이 달아 주시는 댓글도 제게는 신비로움 입니다. 댓글 감사합니다. ^^

  13. 김일규 댓글:

    좋은 소스 감사합니다.
    요번에 추진중인 사이트가 있는데 적용해봐야겠네요 ㅎㅎ

  14. 나그네 댓글:

    정찬명님은 웹퍼블리셔라 생각이 되는데 PSD -> HTML 변환작업에 있어서
    이미지 커팅작업을 하시는지 궁금하네요.

  15. 익명 댓글:

    보통 퍼블리싱 할때 병행 하지않나요?

    전 작업할때 디자이너한테 PSD만 넘겨 받아 퍼블리싱 진행하는데요?

    원래 프로그래머가 퍼블리싱까지 안하죠?

  16. 정찬명 댓글:

    @나그네 @익명
    이미지 자르는 작업은 HTML과 CSS를 다루시는 분들이 하셔야 가장 좋은 것 같아요. 이미지 사이즈에서부터 퍼포먼스에 좋은 형태로 내보내는 일을 다른 직군이 하게 되면 웹 사이트 성능에 좋지 않을 것 같은데요. ^^

  17. 익명 댓글:

    안녕하세요. 좋은 css 인터페이스를 보고 제 작업에 적용해 보고 싶은데 소스나 아이콘등이 CCL 3.0를

    따르고 계시는데 .. 저작권 표시는 어디에다 해야하는지 알고 싶어서.. 문의 드립니다.

    노출되는 페이지에다 해아하는지 아님 소스내부에 해야하는지 그 부분을 알고 싶네요

  18. 정찬명 댓글:

    @익명
    CCL 3.0 을 따르는 것은 소스코드를 분류해서 문서화 해놓은 /ouif/ 페이지 뿐입니다. 그 안에 포함된 소스코드들은 CCL 3.0의 영향을 받지 않으므로 어떤 목적으로 사용하시든 아무것도 표기하실 의무가 없습니다. ^^

  19. 액션 댓글:

    새창으로 보기해서 F5로 새로고침해보면
    FAQ 질문, 답변되는 부분이 모두 펼쳐졌다가 사라지곤합니다.

    질문. 새로고침해도 모두 펼쳐졌다 접히는부분 안보이게 할수있는방법 없을까요?

  20. 정찬명 댓글:

    @액션
    body 끝나는 지점에 있는 스크립트를 문서 head로 옮기시면 증상이 좀 덜 합니다. 이런 증상을 완전히 사라지도록 하려면 CSS 파일에서 .faq .a 선택자에 display:none 을 추가 하세요. 한편 이렇게 .faq .a 요소에 display:none을 추가하게 되면 자바스크립트 미 지원 환경에서는 이 목록이 닫힌 상태로만 제공이 되고 펼쳐지지 않기 때문에 상호운용성이 떨어지게 됩니다. 자바스크립트를 문서 하단에 넣는 이유는 브라우저가 자바스크립트보다 문서의 HTML을 먼저 해석해서 화면에 빨리 보이도록 하도록 하기 위함 입니다.

  21. 액션 댓글:

    위에 답변 감사합니다 ^^
    제가 FAQ 리스트가 많아서 유저가 질문요청시
    해당하는 FAQ를 열린상태로 주소를 링크걸어서 보내면

    받는사람도 해당 FAQ를 열린상태로 받아볼수 있게 하고 싶은데
    아직 구현하는 방법을 잘모르겠습니다. 도움좀 부탁드립니다 ^^

  22. 정찬명 댓글:

    @액션
    아~ 정말 좋은 생각이세요. 그러면 정말 편하겠어요. 그런데 아직 그걸 어떻게 구현해야 하는지에 대한 지식이 없어서요. 제가 그 방법을 알게 되면 바로 수정해서 반영하겠습니다.

  23. 하늘다람쥐 댓글:

    궁금한게 있는데요..게시판을 표현하려고 할때는
    (메인페이지에 게시판 리스트 뿌려주는 방법이요) [div][ul][li] [/li][/ul][/div]에서 li의 반복으로 표현을 하려고 하는데 그때에 li에 ” 내용 + 날짜 ” 를 표현해야하는뎅..그때는 어떤 방법으로 하는게 좋을까요?
    예전에 테이블 구조때는 td로 모두 나눠서 할수 있었는데~

  24. 정찬명 댓글:

    @하늘다람쥐
    게시판은 테이블로 마크업 하기에 적합한 전형적인 표 데이터라고 볼 수 있습니다. 게시판을 목록으로 마크업 하는 것이 틀린 것은 아니지만 표가 더 적합한 마크업 방법 입니다. 많은 분들이 웹 표준에 입문 하시면서 이런 부분들을 오해를 하시곤 하죠. ^^

  25. 하늘다람쥐 댓글:

    에고..ㅎ…한 걱정 놨습니다..ㅎ
    좋은 충고 감사드립니다~^_^

  26. 김정수 댓글:

    하..저도 jQuery소스를 많이 찾아 다니고 있는데
    나라디자인에 오면 소스정리며 코드정리도 깔끔해서 아주 보기가 편해요^^
    스크립트나 jQuery를 접근성까지 돼어 있는 소스를 찾아 저장저장 하며 다니고
    있어요.ㅎㅎ(미래의나의 자산)

  27. 정찬명 댓글:

    @김정수
    유용하게 쓰시면 좋겠네요. ^^ 감사합니다.

  28. 묘오나 댓글:

    안녕하세요…^^
    굉장히 쉽게 접근할 수 있는 jQuery에 매력을 느끼게 되는거 같아요^^
    매번 눈팅만 하다가..
    이 FAQ 소스 좀 적용하려구요^^;
    그냥 가져가는 건 예의가 아닐거 같아 댓글 남깁니다.

    (정말 CSS만 조금 손 보면 되네요;; 와우^^; 정말로 감사합니다~!!)

  29. 정찬명 댓글:

    @묘오나
    JQwery 덕분에 일도 많이 편해졌지요. 좋은날 되세요. ^^

  30. coffee 댓글:

    눈팅만 하다 몇자 적고 가네요…
    FAQ 소스 살짝 가져가며 인사드립니다.
    ^^;;

  31. 정찬명 댓글:

    @coffee
    그냥 눈팅만 하셔도 되는데 이렇게 댓글 쓰시면 제가 특별히 이뻐해드립니다. ㅎㅎ

  32. 박성호 댓글:

    “CSS Tab Navigation의 List Item Navigation”과 함께 사용하니 약간 문제가 있네요.
    FAQ 부분을 탭네비게이션 아이템 부분에 출력하게 되면 레이어가 떠버려서 밑의(다른)
    내용이 탭네비게이션 밑으로 찰싹 달라붙고 FAQ 컨텐츠는 위에 겹쳐서 출력되네요.
    탭네비와 FAQ 부분의 포지션 부분을 열심히 들여다 보고 있는데…. ^^; 해결이
    잘 안됩니다. ^^

    참 오묘한? CSS네요. ^^

    탭네비 내용 넣는 안에 FAQ를 넣으면…. 뭐가 정확히 문제인지 모르겠습니다. ㅠ ㅠ
    포지션 문제인거 같은데….

  33. 정찬명 댓글:

    @박성호
    JS가 참조하고 있는 HTML 구조가 바뀌지 않기 때문에 이론상 문제가 없어야 할 것 같은데 참 이상하군요. 문제 상황이 재현되어 있는 페이지의 URL을 남겨주시면 시간 날 때 한번 확인해 보도록 하겠습니다.

  34. 박성호 댓글:

    아~ ㅠ ㅠ 고맙습니다. 찬명님.
    http://www.imagedrawing.co.kr/tabTest.html
    여기다 제가 의도하는 구조를 테스트로 만들어 올려 놨습니다. 찬명님의
    소스는 전혀 손대지 않고 합쳐만 놨습니다.

    발견된 문제점은
    1. 레이어가 겹치는 것
    2. FAQ의 제목부분에 하단부 여백이 생기는 것
    3. 답변내용이 열리면 제목부분의 탑보더가 없어지는 것
    4. 이 테스트페이지에는 안나타나지만 FAQ의 아코디언 효과 때문인지
    페이지가 처음 열리면 FAQ 밑으로 전체펼침 효과가 발생할 때만큼의
    공백이 미리? 생기고 다른 탭을 눌렀다가 다시 돌아올때 정상적으로
    보이네요. (아코디언 효과를 사용하면 굳이 그 여백이 필요없지만…)

    시간 나실 때 한 번 봐 주시면 감사드리겠습니다. ^^

  35. 정찬명 댓글:

    @박성호
    HTML 구조가 달라졌고 시멘틱하지 않게 작성이 되었네요.
    탭목록의 HTML 구조는 ‘.listTab>ul>li>ul>li’ 순으로 중첩이 되는데요.
    성호님이 작성하신 HTML 구조는 현재 ‘.listTab>ul>li>ul>li>.faq>ul>li’ 이런식으로 되어 있습니다.

    일단 이 HTML 구조를 먼저 ‘.listTab>ul>li>ul>li’ 이 구조로 바꾸셔야 합니다.
    중간에 불필요하게 포함된 ‘ul>li>.faq’ 마크업은 제거 하셔야 하는 거죠.

    물론 그에 알맞게 CSS, JS의 선택자도 수정이 되어야 합니다.

  36. 박성호 댓글:

    정찬명님 ^^ 빠른 답변 감사드립니다.
    음… 생각보다 복잡한? 문제인 것 같습니다.
    찬명님의 댓글을 보면서 고민에 고민을 거듭해야 이해할 것 같습니다.
    최대한 이해하도록 노력해야겠습니다. ㅠ ㅠ
    조언해 주셔서 정말 감사드립니다.

  37. 정찬명 댓글:

    @박성호
    네, 저도 이걸 한 번에 이해하시리라고 기대하고 드린 답변은 아니었습니다. 글로 쓰다보니 아무래도 전달력이 떨어지고 늦게라도 이해가 되셨으면 좋겠습니다. ^^

  38. 오파솜 댓글:

    정말 좋은 내용입니다. 꼭 필요하던 내용을 찾던중에.. 정말 맘에 드는걸 찾고 수정하고 만지작 하는데요.. 궁금한게 하나있습니다. 첫번재 글을 오픈하고 싶은데. 쉽지 않네요.. 혹시 되는지 궁금합니다.

  39. 최선기 댓글:

    이것을 이용해 FAQ를 작성 하였습니다.
    정말 좋은 내용 고맙습니다. ^^

    @오파솜
    저는 eq:(0) 으로 오픈하였습니다.

  40. 정찬명 댓글:

    @오파솜
    최선기님 설명 감사합니다. ^^ 아래 코드를 이렇게 수정해 보세요.

    수정전
    var article = $(‘.faq .article’);
    article.addClass(‘hide’);
    article.find(‘.a’).slideUp(100);

    수정후
    var article = $(‘.faq .article’);
    article.addClass(‘hide’);
    article.find(‘.a’).slideUp(100);
    article.eq(0).removeClass(‘hide’).addClass(‘show’);
    article.eq(0).find(‘.a’).slideDown(100);

    eq(0) 이면 첫 번째 항목을 선택하는 것입니다. eq(1) 이면 두 번째 이구요.

  41. 오파솜 댓글:

    최선기님. 정찬명님 댓글 감사합니다.
    수정후의 소스를 적용해 보았습니다. 원하던 첫번째가 보이는건 잘 됩니다.
    그런데 제가 잘못한건지 그 상태에서 2번째, 3번째를 클릭하게 되면 클릭한 부분의 답변이 바로 오픈되는게 아니라 첫번째 글의 답변이 닫히고 다른글이 오픈은 안됩니다.
    저만 그런가요..??
    이것까지 요구하는 건 아니구요. 저 첫번째 여는 방식의 구현을 알고 싶어서 여쭤본겁니다.
    감사합니다..

  42. 정찬명 댓글:

    @오파솜
    지금 첫 번째 항목을 열어두는 코드를 임시로 넣어 두었습니다. 한번 확인해 보시겠어요?
    http://naradesign.net/ouif/uio/list/faq/xhtml.html

  43. Loptz 댓글:

    정찬명님
    XE용 게시판으로 만들려고 합니다
    그래서 정찬명님이 만드신 faq를 응용해서 만들려고 합니다.
    혹시나 이 faq의 코드를 조금 주실수 있을까요 ?

  44. 정찬명 댓글:

    @Loptz
    조금이 아니라 전부 가져가실 수 있습니다.
    http://naradesign.net/ouif/uio/list/faq/xhtml.html
    이 페이지의 HTML/CSS/JS 코드를 복사해서 쓰시면 됩니다. ^^

  45. 심라 댓글:

    궁금한것이 있는데요, 위의 다섯가지 태그유형에 따라 문자낭독기가 읽어주는게 차이가 있나요?

  46. 정찬명 댓글:

    @심라
    네, 아마도 차이가 있을것입니다. 화면낭독기가 잘 만들어진 것이라면 ‘비순차목록, 항목, 정의목록, 정의, 설명’과 같이 요소 이름을 함께 읽어줄 것입니다. 그러나 모든 화면낭독기가 이렇게 동작한다고 보장할 수는 없습니다. 국산 화면낭독기는 읽어주는것으로 알고 있습니다.

  47. 댓글:

    감사합니다!

  48. ^^ 댓글:

    감솨 함돠~~

  49. 0eun 댓글:

    좋은 자료 보고 갑니당
    소스 사용이 가능한건가요?ㅎㅎ

  50. 정찬명 댓글:

    @0eun
    네, 얼마든지 가능합니다. ^^;

  51. 익명 댓글:

    소스 굉장히 필요이상으로 복잡하게 짜셨네요. 제이쿼리

    $(function($) {

    var $article = $(‘.faq>.faqBody>.article>.q>a’);
    $article.click(function() {

    var $ansr = $(this).parent().next();

    if ($ansr.css(‘display’)==’none’) {
    $ansr.slideDown(100);
    } else {
    $ansr.slideUp(100);
    }
    return false;
    });
    });

    이정도만 써도 충분히 가능합니다.

  52. 정찬명 댓글:

    @익명
    그러게요. 7년 전에 jQuery 처음 배우면서 작성한 코드였는데 지울 수도 없고. 감사합니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님