Есть код
<div class="faq">
<ul class="faq-questions">
<li class="li-question" id="li-qufaq1">
<div class="faq-question-title">
<img src="./Img and icon/Ellipse 1.svg" alt="" class="faq-img">
<h3 class="faq-question" id="faq-title 1">Брифинг и начало работы</h3>
</div>
<p class="faq-answer">Постановка задачи, обсуждение проекта с клиентов, расчет стоимости работы. После этого клиент вносит предоплату равную 30% от общей суммы проекта и предоставляет имеющиеся необходимые материалы для сайта</p>
</li>
<li class="li-question" id="li-qufaq2">
<h3 class="faq-question">Мудборд и дизайн-концепция </h3>
<p class="faq-answer">Разработка сайта</p>
</li>
<li class="li-question" id="li-qufaq3">
<h3 class="faq-question">Разработка прототипа и адаптивного дизайна</h3>
<p class="faq-answer">Разработка сайта</p>
</li>
<li class="li-question" id="li-qufaq4">
<h3 class="faq-question">Разработка сайта</h3>
<p class="faq-answer">Ответ</p>
</li>
<li class="li-question" id="li-qufaq5">
<h3 class="faq-question">Аналитика и тестирование</h3>
<p class="faq-answer">Ответ</p>
</li>
<li>
<a href="" class="faq-btn">Получить консультацию</a>
</li>
</ul>
</div>
.faq-question-title {
display: flex;
align-items: center;
column-gap: 16px;
}
.article-SoW {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.faq {
width: 810px;
position: relative;
}
.faq-answer {
max-width: 540px;
}
.faq-questions > li {
width: 100%;
display: block;
padding: 24px;
background-color: #090909;
border: 1px solid #f8f8f8;
border-radius: 20px;
margin-top: 32px;
}
.faq-questions > li h3.faq-question, .faq-questions > li .faq-question {
font-size: 24px;
font-weight: 500;
color: #f8f8f8;
}
.faq-questions > li p.faq-answer, .faq-questions > li .faq-asnwer {
font-size: 16px;
line-height: 1.5;
margin-top: 32px;
display: none;
}
$(function() {
var $speed = 200;
var $class = 'opened';
var $class_open = '.faq-answer';
$(document).ready(function() {
$('.li-question').on('click', function() {
$ul = $(this).closest('ul');
$answer = $(this).closest('li').find($class_open);
if (!$(this).closest('li').hasClass($class)) {
$ul.find('li').each(function() {
if ($(this).hasClass($class))
$(this).removeClass($class).find($class_open).slideUp($speed);
});
}
$answer
.slideToggle($speed)
.closest('li')
.toggleClass($class);
});
});
});
Хочу, чтобы при нажатии на какой-то из этапов, выбранный этап изменял цвет бекграунда, пропадал border и менялась иконка цифры. Пробовал через получение id, чтобы потом изменяло через если нажали на кнопку, то получить id, изменить цвет, а у предыдущего изменить на исходный цвет. Еще пробовал через css, :focus, но тоже ничего не происходило. По итогу не получилось, может как-то по-другому сделать, тогда вопрос, а как?
Средний
