부트 스트랩에서 아코디언에 플러스 또는 마이너스 기호를 추가하는 방법은 무엇입니까? 플러스와 아코디언이 닫혀있을 때 플러스 표시

Question

아코디언을 부트 스트랩에 추가하려고했는데, 내용을 표시하는 div가 열려있을 때 플러스를 표시하고 닫을 때 마이너스로 표시하고 두 번째 탭을 열 때도 플러스를 표시합니다. 열려있는 다른 탭 (현재 발생)의 내용을 닫고 마이너스 아이콘을 활성 탭이 아닌 다른 탭의 더하기 아이콘으로 변경해야합니다.

해결 방법이나 접근 방식을 알면 누구나 크게 감사하겠습니다. :)

enter code here 
<h2>Accordion Example</h2> 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse in"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
    </h4> 
    </div> 
    <div id="collapse2" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
    <h4 class="panel-title panel-title-custom"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
    </h4> 
    </div> 
    <div id="collapse3" class="panel-collapse collapse"> 
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
    </div> 
</div> 

jquery code 

<script> 

$(document).ready(function() { 
$('.panel-title-custom').addClass('glyphicon glyphicon-plus'); 

$('.panel-title-custom').click(function(){ 
    $(this).toggleClass('glyphicon-plus glyphicon-minus'); 

    }); 

}); 

</script> 

Answer 1

여기에 작업 코드가 있습니다.

$('#accordion') 
    .on('show.bs.collapse', function(e) { 
    $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-plus');   
    $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-minus'); 
    }) 
    .on('hide.bs.collapse', function(e) { 
    $(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-minus'); 
    $(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-plus'); 
    }); 

확인 당신은 이미 시도하고 더 좋은 예를 제공 한 어떤 JSFiddle

아래

JSFIDDLE