부트 스트랩 축소 변경 버튼을 클릭

Question

에 덜 읽는 나는 다음과 같은 부트 스트랩 코드가 : 버튼의 클릭에

<div class="col-lg-4 col-md-4 col-sm-4" id="collapseTwo"> 
     <h2>What</h2> 
     <p>Find out what we do</p> 
     <div id="what" class="collapse"> 
     <p>Text here.</p> 

     <a class="btn btn-default" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a> 
    </div> 

, 그것은 "무엇을"내부의 텍스트가 표시됩니다. 완료되면 버튼을 "더 읽음"에서 "덜 읽음"으로 변경하고 싶습니다. Ive는 다른 예제를 찾았지만 붕괴 기능이있는 것 같지 않고 구현 방법을 모릅니다.

도움말 또는 올바른 방향으로 포인터를 주시면 감사하겠습니다.

Answer 1

내가 그것을에서 답변을 사용하여 해결하기 위해 관리 : 답장에 대한

jQuery: Change button text on click

감사 어쨌든!

Answer 2

은

<a class="btn btn-default" class = "readbtn" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a> 

$('.readbtn').on('click', function() { 
    $(this).html('Read less); 
}); 

희망처럼이에 대한 자신의 JQuery와 리스너를 작성하지 왜 당신이 물어 있었는지와 바이올린을 제공하시기 바랍니다하지 않을 경우 얻을. 고맙습니다.

Answer 3

당신은 이런 식으로 뭔가를 시도 할 수 :

<a class="btn btn-default" data-toggle="collapse" id="link" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a> 

<script> 
$('#what').on('hidden.bs.collapse', function() { 
    $('#link').text('Read Less'); 
}) 
</script> 

Answer 4

나는 단지 HTML과 CSS 을 사용하여이 작업을 수행했습니다.
https://codepen.io/iamandrewluca/pen/Emzzbm

Answer 5

여기에는 부트 스트랩에 붕괴 이벤트가 있습니다. 여기에 읽기 : Bootstrap JS Collapse Reference 여기

<script> 
    $('#extra-text').on('hidden.bs.collapse', function() { 
     $('#read-more').text('Read More'); 
    }); 
    $('#extra-text').on('shown.bs.collapse', function() { 
     $('#read-more').text('Read less'); 
    }); 
    </script> 

extra-text은 붕괴 DIV이다. read-more은 접히는 버튼이나 태그입니다.