bootstrap collapse: изменение отображения значков кнопок и текста

Question

Я использую Twitter Bootstrap для создания разборчивых разделов текста. Секции расширяются при нажатии кнопки +. Мой HTML-код следующим образом:

Demo link

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 
      <span class="glyphicon glyphicon-chevron-down"></span> Open 
     </button> 
     </h4> 
    </div> 
    <div id="demo" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     Contents:Thank you to help me solve the problem, you're a great guy! 
     </div> 
    </div> 
    </div> 
</div> 

Позже, мне нужно изменить текст, значки кнопок и расшириться.

открыт:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 
    <span class="glyphicon glyphicon-chevron-up"></span> Close 
</button> 

Близка:

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 
    <span class="glyphicon glyphicon-chevron-down"></span> Open 
</button> 

Answer 1

на основе: https://stackoverflow.com/a/16870379/1596547

$('button span').parent().click(function() { 
if($('button span').hasClass('glyphicon-chevron-down')) 
{ 
    $('button').html('<span class="glyphicon glyphicon-chevron-up"></span> Close'); 
} 
else 
{  
    $('button').html('<span class="glyphicon glyphicon-chevron-down"></span> Open'); 
} 
}); 

Answer 2

Я нашел этот вопрос и ответ полезным. Я удалил метод parent() и добавил идентификатор к моей +, чтобы избежать изменения других кнопок при переключении +.

$('#more').click(function() { 
if($('button span').hasClass('glyphicon-chevron-down')) 
{ 
    $('#more').html('<span class="glyphicon glyphicon-chevron-up"></span> Less Info'); 
} 
else 
{  
    $('#more').html('<span class="glyphicon glyphicon-chevron-down"></span> More Info'); 
} 
}); 

http://jsfiddle.net/maybolles/opbyvbv4/2/

Answer 3

использование этого Javascript для изменения значок

$(document).ready(function(){ 
    $("#demo").on("hide.bs.collapse", function(){ 
     $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); 
    }); 
    $("#demo").on("show.bs.collapse", function(){ 
     $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); 
    }); 
    $("#demo1").on("hide.bs.collapse", function(){ 
     $(".btn1").html('<span class="glyphicon glyphicon-collapse-down"></span> Open'); 
    }); 
    $("#demo1").on("show.bs.collapse", function(){ 
     $(".btn1").html('<span class="glyphicon glyphicon-collapse-up"></span> Close'); 
    }); 
}); 

Answer 4

Если вы используете JQuery затем использовать toggleClass

$('div.toggler').click(function(){ 
    $('div.toggler span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); 
}); 

Рабочая JSFiddle здесь

Answer 5

Также можно использовать стили css.

в CSS добавить стиль:

.text-toogle[aria-expanded=false] .text-expanded { 
    display: none; 
} 
.text-toogle[aria-expanded=true] .text-collapsed { 
    display: none; 
} 

и использовать в HTML:

<a class="btn btn-default text-toogle" data-toggle="collapse" data-target="#tabsNavigation" aria-expanded="false"> 
    <span class="text-collapsed">More info</span> 
    <span class="text-expanded">Less info</span> 

    <i class="fa fa-angle-right"></i> 
</a> 

---

Пожалуйста, не забудьте добавить атрибуту

aria-expanded="false" 

и класс

text-toogle 

Ссылка/кнопка.