부트 스트랩 토글 버튼 테마, 버튼 텍스트 및 div

Question

확인 3 점을받습니다. (3) 부트 스트랩을 사용하여 Javascript 또는 Jquery를 사용하여 토글하고 싶은 것들.

Fiddle not working 내가 로컬에서 온라인으로 작업해야하는 이유가 무엇인지 알 수 있습니다.

JavaScript does work here in this example

자바 스크립트

function toggleLink(obj) 
    { 
     var idCount = obj.id; 
     idCount = idCount.replace(new RegExp('cont', 'g'), ''); 

     var elem = document.getElementById("show"+idCount); 

     var hide = window.getComputedStyle(elem, null).display =="none"; 
     if (hide) { 
      elem.style.display="block"; 
     } 
     else { 
      elem.style.display="none"; 
     } 
    } 

간단한 CSS

[id^="show"] { 
display: none; 
} 

HTML

<button class="btn btn-primary" id="cont1" href="javascript:void(0)" 
    onclick="toggleLink(this)">More </button><P><P> 

    <div id="show1"> 
    CONTENT AREA #1</div><P><P> 

    <button class="btn btn-default" id="cont2" href="javascript:void(0)" 
    onclick="toggleLink(this)">More </button><P> 

    <div id="show2"> 
    CONTENT AREA #2<p></div> 

그래서 어떤이는 이제 시작 DIV의 가시성을 전환입니다 않습니다 내용

변경 라벨 전환

1. : 시작 "계속 (I)"나는 다음과 같은 3 가지 전환 할

   어떤 단추 나 링크에서 "쇼 (I)"와 닝 또는 "추가"에서 버튼의 텍스트를 "덜"

2. 는

가 어떤 도움이 많이 감사 시작있어 다른 부트 스트랩 버튼 테마 (어떤 기본, 차 등)를 지정합니다. TIA. 내가 그것을 사용하여 샘플을 만들어 때문에, jQuery를 사용 botter하지 않았 으면

Answer 1

, take a look

당신이주의해야 할 주요 부분은 toggleLink() 함수 안에있는 추적 코드는 다음과 같습니다

• text() : 나는 두 JQuery와의 기능을 사용하고

  if($(obj).text()==='More'){ 
       $(obj).text("Less"); 
       $(obj).attr("class","btn btn-primary"); 
      }else{ 
       $(obj).text("More"); 
       $(obj).attr("class","btn btn-default"); 
      } 
  

  html로 요소 내부의 텍스트를 변경하는 데 사용됩니다, 이것은 단지 텍스트를 더 개월을 넣지 레;

• attr() : html 요소의 속성을 변경하십시오.

도움이 되었기를 바랍니다.