Как анимировать галочку в выпадающем списке?

Question

[Дмитрий Щербаков]

Добрый день, передо мной встала задача создать анимированный выпадающий список. Я взял это решение на jQuery. Но мне необходимо создать анимацию крутящейся стрелки при открывании списка
Это то, как мне нужно сделать список.

Это то, какой сейчас список у меня. Помогите пожалуйста добавить и анимировать стрелку
Вот что я пока что использовал

$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).children("ul").slideToggle();
        event.stopPropagation();
    });
});

<div class="question_list">
				<ul id="list">
					<h2 class="question_title">
						Ответы на часто задаваемые вопросы
					</h2>
				    <li class="question_question">"Как понять, когда зуб надо уже удалять, и когда еще можно лечить?"
				        <ul>
				            <li class="question_answer">Такое серьезное хирургическое вмешательство, как удаление зуба, происходит только в крайних случаях. Существуют абсолютные показания к удалению – так называемые “три О”. Первое – это острый периодонтит. Второе – отломанная коронковая часть зуба. И третье – остомиелит челюсти. Также зубы удаляют в том случае, если они неправильно ил слишком поздно прорезались и травмируют ротовую полость.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Можно ли вылечить кисту в корне зуба?"
				        <ul>
				            <li class="question_answer">Да, зубы под наркозом лечат. Можно. Раньше зубы с большими изменениями в костной ткани однозначно были обречены на удаление. Имеются в виду такие изменения в области верхушек корней, как кисты и гранулемы. В наши дни качественная стоматология справляется с лечением и сохранением таких зубов.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Обязательно ли пользоваться нитью для чистки зубов?"
				        <ul>
				            <li class="question_answer">При чистке зубной нитью вы удаляете зубной налет и частички пищи в таких участках полости рта, куда зубной щетке не добраться между зубами и под пришеечной частью десны и между зубами. Да, пользоваться зубной нитью обязательно, и рекомендуется делать это каждый день. Иначе скопления зубного налета могут вызвать кариес, болезнь десен.</li>
				        </ul>
				    </li>
				    <li class="question_question">"Что делать, если произошла травма зуба?"
				        <ul>
				            <li class="question_answer">Видов травм бывает много, даже в случае сломанного зуба встает вопрос, какая часть была сломана: коронковая часть или корень. Мог произойти не перелом, а подвывих. Или, может быть, вас беспокоит подвижность зуба (он шатается). В любом случае надо прийти на прием к лучшим стоматологам нашей клиники. Мы сделаем все, чтобы сохранить корень и зуб в целом. Если поврежденную часть нельзя восстановить, мы окажем хирургическую помощь.</li>
				        </ul>
				    </li>
				</ul>
			</div>

li{
	 list-style-type: none;
}
ul{
	padding: 0;
}
#list {
}
#list > li {
}
#list > li > ul {
    display: none;
}
#list{
	width: 100%;
}
.question_question {
	background-image: url(img/open.png);
    font-family: "PFAgoraSansPro-Light";
    font-size: 1.5vw;
    background: white;
    border-radius: 2vw;
    width: 57vw;
    text-align: center;
    margin-bottom: 2vw;
    box-shadow: 0vw 0vw 1.3vw 0.1vw #c0bebe;
    padding-top: 0.7vw;
    padding-bottom: 0.7vw;
    cursor: pointer;
    margin-left: 8vw;
    margin-right: 8vw;
}
.question_question:hover{
	color: white;
	background: #21cff2;
}
.question_answer {
    font-family: "PFAgoraSansPro-Regular";
    font-size: 1.2vw;
    padding: 1vw 1vw;
}
.question_list{
	padding-bottom: 2vw;
	padding-top: 1vw;
}

Answer 1

[Владимир Проскурин]

Добавляете стрелку

<div class="question_list">
        <ul id="list">
          <h2 class="question_title">
            Ответы на часто задаваемые вопросы
          </h2>
            <li class="question_question">"Как понять, когда зуб надо уже удалять, и когда еще можно лечить?"
                 <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Такое серьезное хирургическое вмешательство, как удаление зуба, происходит только в крайних случаях. Существуют абсолютные показания к удалению – так называемые “три О”. Первое – это острый периодонтит. Второе – отломанная коронковая часть зуба. И третье – остомиелит челюсти. Также зубы удаляют в том случае, если они неправильно ил слишком поздно прорезались и травмируют ротовую полость.</li>
                </ul>
            </li>
            <li class="question_question">"Можно ли вылечить кисту в корне зуба?"
                <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Да, зубы под наркозом лечат. Можно. Раньше зубы с большими изменениями в костной ткани однозначно были обречены на удаление. Имеются в виду такие изменения в области верхушек корней, как кисты и гранулемы. В наши дни качественная стоматология справляется с лечением и сохранением таких зубов.</li>
                </ul>
            </li>
            <li class="question_question">"Обязательно ли пользоваться нитью для чистки зубов?"
                 <span class="arrow"></span>
                <ul>
                    <li class="question_answer">При чистке зубной нитью вы удаляете зубной налет и частички пищи в таких участках полости рта, куда зубной щетке не добраться между зубами и под пришеечной частью десны и между зубами. Да, пользоваться зубной нитью обязательно, и рекомендуется делать это каждый день. Иначе скопления зубного налета могут вызвать кариес, болезнь десен.</li>
                </ul>
            </li>
            <li class="question_question">"Что делать, если произошла травма зуба?"
                <span class="arrow"></span>
                <ul>
                    <li class="question_answer">Видов травм бывает много, даже в случае сломанного зуба встает вопрос, какая часть была сломана: коронковая часть или корень. Мог произойти не перелом, а подвывих. Или, может быть, вас беспокоит подвижность зуба (он шатается). В любом случае надо прийти на прием к лучшим стоматологам нашей клиники. Мы сделаем все, чтобы сохранить корень и зуб в целом. Если поврежденную часть нельзя восстановить, мы окажем хирургическую помощь.</li>
                </ul>
            </li>
        </ul>
      </div>

в js пишите

$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).find('.arrow').toggleClass('active');
        $(this).children("ul").slideToggle();
        event.stopPropagation();
    });
});

В стилях

.arrow {
transition: transform 1s;
}
.arrow.active {
transform: rotate(90deg);
}

Comments

[Дмитрий Щербаков]

Нет, вы не поняли, сам момент анимации я прекрасно понимаю, мне не понятно, как именно вставить стрелку, чтобы она всегда была в том месте, подскажите пожалуйста, как этого добиться?

[Владимир Проскурин]

dsherbakov, добавил код.

[Дмитрий Щербаков]

Спасибо, со стрелкой теперь всё круто, но проблема теперь в том что принажатии на элемент списка он открывается и тут же закрывается

[Владимир Проскурин]

dsherbakov, это потому, что я невнимательный) Добавил лишний код.

[Дмитрий Щербаков]

Владимир Проскурин, Спасибо большое, вы очень помогли

Answer 2

[Апатий Черный]

$(document).ready(function () {
    $('#list > li').click(function (event) {
        $(this).children("ul").slideToggle();
        event.stopPropagation();
         $(this).children("ul").children("li").children("i").addClass('active');
    });
});

.active{
transition: 1s;
transform: rotate(90deg);
}

Html и css сами додумайте