Мой ответ будет содержать две части - в первой я поясню как оптимизировать конкретно ваш код, а во второй покажу как такое надо делать правильно.
Часть первая.
Первым делом сохраним элемент, к которому вы обращаетесь больше всего, в отдельную переменную:
$('.faq__question').click(function() {
$(this).siblings('.faq__answer').slideToggle();
const icon = $(this).find('.faq__icon');
const iconSrc = icon.attr('src');
if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
iconwomen = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
iconman = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
iconmanwomen = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else {
if (icon.attr('class') == 'faq__icon faq__icon--women') {
icon.attr('src', iconwomen);
} else if (icon.attr('class') == 'faq__icon faq__icon--man') {
icon.attr('src', iconman);
} else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
icon.attr('src', iconmanwomen);
}
}
});
Далее надо разобраться с условиями, они у вас не оптимальны. Выходит, что если иконка не подходит по критерию, вы опять же перебором ставите ссылку назад. Вот здесь чуть яснее, когда именно какое действие надо делать:
var iconman, iconwomen, iconmanwomen;
var icons = ['imgs/dropdown/dropdown__women.png', 'imgs/dropdown/dropdown__man.png', 'imgs/dropdown/dropdown__manwomen.png'];
$('.faq__question').click(function() {
$(this).siblings('.faq__answer').slideToggle();
const icon = $(this).find('.faq__icon');
const iconSrc = icon.attr('src');
if (icons.includes(iconSrc)) {
if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
iconwomen = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
iconman = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
iconmanwomen = iconSrc;
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
}
} else {
if (icon.attr('class') == 'faq__icon faq__icon--women') {
icon.attr('src', iconwomen);
} else if (icon.attr('class') == 'faq__icon faq__icon--man') {
icon.attr('src', iconman);
} else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
icon.attr('src', iconmanwomen);
}
}
});
Теперь можно вынести повторяемый код:
var iconman, iconwomen, iconmanwomen;
var icons = ['imgs/dropdown/dropdown__women.png', 'imgs/dropdown/dropdown__man.png', 'imgs/dropdown/dropdown__manwomen.png'];
$('.faq__question').click(function() {
$(this).siblings('.faq__answer').slideToggle();
const icon = $(this).find('.faq__icon');
const iconSrc = icon.attr('src');
if (icons.includes(iconSrc)) {
if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
iconwomen = iconSrc;
} else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
iconman = iconSrc;
} else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
iconmanwomen = iconSrc;
}
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else {
let iconOldSrc;
if (icon.attr('class') == 'faq__icon faq__icon--women') {
iconOldSrc = iconwomen;
} else if (icon.attr('class') == 'faq__icon faq__icon--man') {
iconOldSrc = iconman;
} else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
iconOldSrc = iconmanwomen);
}
icon.attr('src', iconOldSrc);
}
});
Теперь код стал чище и, за счёт работы с переменными, будет проще находить проблемы. Но всё-равно этот код неоптимален с точки зрения логики. Намного проще хранить состояние в самом объекте:
$('.faq__question').click(function() {
$(this).siblings('.faq__answer').slideToggle();
const icon = $(this).find('.faq__icon');
const iconSrc = icon.attr('src');
const dataIconSrc = icon.attr('data-src');
if (!dataIconSrc) {
icon.attr('data-src', iconSrc);
icon.attr('src', 'imgs/dropdown/dropdown__open.png');
} else {
icon.attr('src', dataIconSrc);
icon.attr('data-src', null);
}
});
Теперь если аттрибут `data-src` имеет значение, значит таб открыт.
Часть вторая.
А вообще такие задачи решаются с помощью CSS. Иконку лучше делать блоком с фоновым изображением:
.icon.man {
background-image: "imgs/dropdown/dropdown__man.png";
}
.icon.woman {
background-image: "imgs/dropdown/dropdown__woman.png";
}
.icon.manwoman {
background-image: "imgs/dropdown/dropdown__manwoman.png";
}
.icon.open {
background-image: "imgs/dropdown/dropdown__open.png";
}
И тогда скрипт будет выглядеть как-то так (я подозреваю, я просто именно с jQuery не люблю работать):
$('.faq__question').click(function() {
$(this).siblings('.faq__answer').slideToggle();
$(this).find('.faq__icon').toggleClass("open");
});
