2013-03-11 4 views
0

12 개의 FAQ 목록이 있지만 사용자가 "더보기"버튼을 클릭 할 때까지 상위 5 개만 표시하려고합니다. 나는 그 부분을 작동시키지 만 그렇게함으로써 새로운 7 가지 FAQ에 대한 답변을 확대합니다. 나는 사용자가 질문을 클릭 할 때까지 대답을 숨기고 싶지만 어떻게 할 것인지 잘 모르겠다. 다른 사람의 코드를 수정하려고하는데, 원래 코드를 쓰지 않았습니다.FAQ 답변 표시/숨기기 확장 답변

예 : [코드] http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm [/ 코드]

JS가 : [코드] 가 // FAQ 질문 응답이 확대

$("#faqlistholder5").each( //count 10 since question <li>s and answer <li>s 
    function() 
    { 
     var f=$("ul",this); 

     if(f.children("li").size()<=10) 
      return; 

     var u=f.children("li:gt(9)",this).hide(); 
     var m="VIEW MORE &raquo"; 

     f.append($('<div id="viewMore" class="toggler"><a id="viewmorebuttonFAQ" class="button">'+m+"</a></div>").toggle(
      function() 
      { 
       u.show(); 
       $("#viewmorebuttonFAQ").html("VIEW LESS &raquo") 
      }, 
       function() 
       { 
        u.hide();$("#viewmorebuttonFAQ").html("VIEW MORE &raquo") 
       })) 
    }); 

[/ 코드]

을 숨길/

$("#faqs .question").click(function() 
{ 
    if($(this).hasClass("open")) 
    { 
     $(this).removeClass("open"); 
     $("#answer_"+$(this).attr("id").split("_")[1]).slideUp().removeClass("open") 
    } 
    else 
    { 
     $("#faqs .question.open").removeClass("open"); 
     $("#faqs .answer.open").slideUp().removeClass("open"); 
     $(this).addClass("open"); 
     $("#answer_"+$(this).attr("id").split("_")[1]).slideDown().addClass("open") 
    } 
}); 

// 본드 페이지 자주 묻는 질문 쇼 0

누구나 나에게 필요한 조언을 제공 할 수 있습니까?

답변

0

봅니다) (u.show 후

$("#faqs .answer").hide().removeClass("open"); 

을 추가;


function() 
     { 
      u.show(); 
      $("#faqs .answer").hide().removeClass("open"); 
      $("#viewmorebuttonFAQ").html("VIEW LESS &raquo") 
     } 
+0

감사합니다,하지만 편집에 행운. – MichaelW

+0

코드 부분이 실행 되었습니까? console.log 또는 alert() – TizianoPiccardi

+0

확인을 추가하십시오. 아래 예제를 참조하십시오. 예 : [코드] http://63.246.25.145/surety-bonds/contract-bonds/performance_bond.htm [/ code] – MichaelW