Как изменить цвет открытого блока faq?
Есть код
<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> |
<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; } |
.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); }); }); }); |
$(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, но тоже ничего не происходило. По итогу не получилось, может как-то по-другому сделать, тогда вопрос, а как?
Дополнительно:
.li-question.opened {фон красный}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета открытого блока faq на вашем сайте, вам необходимо внести изменения в CSS код. Вам потребуется определить класс или идентификатор, который используется для стилизации блока faq, и добавить соответствующие стили для изменения цвета.
Вот пример CSS кода, который вы можете использовать для изменения цвета открытого блока faq:
.faq { background-color: #f0f0f0; /* измените цвет фона на нужный вам */ color: #333; /* измените цвет текста на нужный вам */ border: 1px solid #ccc; /* измените цвет рамки на нужный вам */ padding: 10px; }
Вы можете также добавить другие стили, такие как шрифт, выравнивание текста и т.д., в зависимости от ваших потребностей и дизайна сайта.
Не забудьте подключить этот CSS код к вашему сайту, чтобы изменения вступили в силу. Вы можете добавить этот код непосредственно в файл стилей вашего сайта или внести изменения через панель управления темой, если вы используете платформу управления контентом.
Надеюсь, это поможет вам изменить цвет открытого блока faq на вашем сайте. Если у вас возникнут дополнительные вопросы или потребуется дополнительная помощь, пожалуйста, не стесняйтесь обращаться!