Настройка навигацонных панелей bootstrap?

Question

[kerlaeda7]

Здравствуйте у меня такой вопрос, есть навигацонные панели на сайте выглядят примерно так


вот код одного элемента

<div class="col-lg-6">
					<nav class="navbar navbar-light bg-faded">
					  <button class="navbar-toggler faq_but" type="button" data-toggle="collapse" data-target="#faq3" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
					    Используем ли мы машинный перевод?
					     <b class="caret"></b>
					  </button>

					  <div class="collapse faq_v" id="faq3">
					    <div class="bg-inverse p-a-1">
					      <h4>Collapsed content</h4>
					      <span class="text-muted">Toggleable via the navbar brand.</span>
					    </div>
					  </div>
					</nav>
				</div>

Теперь самое интересное, нужно сделать так что бы стрелка справа при нажатие переворачивалась на 180% т.е. смотрела вверх и при закрытии опять возвращалас в исходное положение. Подскажите как это реализовать.

P.S. пробывал псевдоклассом :focus для кнопки но тогда она не возвращалась обратно пока не переключишься на другой объект

Answer 1

[Дмитрий]

Пример