Bootstrap 4 Collapse show state with Font Awesome icon

У меня есть один крах Bootstrap 4 следующим образом...

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
<div class="row collapse in" id="collapseNEWS">Content</div>

Это автоматически отображает содержимое, если не щелкнуть значок шрифта. Я показываю иконку fa-chevron-circle-up при начальной загрузке.

После щелчка по значку содержимое закрывается, и вместо этого я хотел бы отобразить значок fa-chevron-circle-down. Как бы я этого достиг?

Я посмотрел на альфа-документацию: http://v4-alpha.getbootstrap.com/components/collapse/

... но мне не ясно, как я устанавливаю государство, чтобы показать либо...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i>

или же...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i>

Спасибо, Нью-Джерси

Ответы

Ответ 1

Вы можете добавить значок font-awesome с помощью пользовательского CSS (свойство content):

Просто используйте <i class="fa"></i> и

[data-toggle="collapse"] .fa:before {   
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}

Пример в коде

Ответ 2

Чтобы продолжить это, теперь используйте бета-версию Bootstrap 4, если это имеет значение:

Это не будет работать, когда начальное состояние будет свернуто - значок будет отменен. Щелчок по кнопке через цикл исправит ее - но было бы неплохо иметь это право для начала. Секрет: добавьте

class="collapsed"

к переключающей ссылке (-ам). Пример с интерактивным заголовком текста, а также значок:

<div class="card-header d-flex justify-content-between" id="headingCollapse1">
    <div>
        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
            Card Header
        </a>
    </div>
    <div>
        <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button">
            <i class="fa" aria-hidden="true"></i>
            <span class="sr-only">Expand/Collapse Card 1</span>
        </a>
    </div>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1">
    <div class="card-body">
        Here is some wonderful content that you can't see...until expanded!
    </div>
</div>

Я также нахожу символы плюс/минус более интуитивными - со стрелками я никогда не уверен, означает ли это, что "текущий статус открыт/закрыт" или "нажмите эту кнопку, чтобы открыть/закрыть". На основе древовидных представлений, среди прочих, я привык к "+" означает "закрыть/клик, чтобы открыть", а "-" означает "открыть/закрыть". Поэтому, хотя я не являюсь непосредственно частью вопроса, я оставлю это для других, чтобы найти (полный кредит для @tmg выше для формата - я просто подключил "правильные" символы):

[data-toggle="collapse"] i:before{
    content: "\f146";
}

[data-toggle="collapse"].collapsed i:before{
    content: "\f0fe";
}

Ответ 3

Вы можете добавить событие toggleClass() в onclick элемента <a></a> и дополнительный класс fa-rotate-180 для элемента Font Awesome icon.

fa-rotate-180 - стандартный класс из шрифта Awesome.

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')">
   <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i>
   Link Text
</a>

Ответ 4

Для SASS-версии FontAwesome 5 используйте mixin fa-content()

HTML:

<i class="fas"></i>

SASS:

[data-toggle="collapse"] i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-down);
}

[data-toggle="collapse"].collapsed i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-right);
}

Я предпочитаю использовать шеврон на фоне круга

Ответ 5

Использование Rails и Bootstrap 4 с Fontawesome 5.5

Это не совсем сработало для меня, оно перевернуло при повторном закрытии. Мне пришлось добавить еще один государственный контроль:

[data-toggle="collapse"] .fas:before {  
  content: "\f055";
}

[aria-expanded="true"] .fas:before {  
  content: "\f056";
}

[data-toggle="collapse"].collapsed .fas:before {
  content: "\f055";
}

Ответ 6

Решение без FontAwesome Unicode и без JavaScript:

  1. Включите обе иконки, где у вас есть одна иконка
  2. Используйте CSS, чтобы скрыть элемент со стрелкой вверх, когда содержимое раскрыто, и скрыть стрелку вниз, когда содержимое свернуто

Пример:

HTML:

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
</a>

CSS:

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}