Как сделать при нажатии чтобы «+» менялся на «-»?

Question

[mrzgt]

На сайте есть горизонтальное меню, в мобильной версии сделал для разворачивания категорий "+",не могу разобраться как при нажатии на него сделать смену на "-"
так не хочет срабатывать

.fa.fa-minus{
display: none;
}
.fa.fa-plus{
	display: block;
}


.dropdown .open .fa.fa-minus  {
display: block;
}

.dropdown .open .fa.fa-minus  {
display: none;
}

Answer 1

[Stalker_RED]

у вас два раза одинаковый селектор описан - .dropdown .open .fa.fa-minus

Comments

[mrzgt]

можно подробней пожалуйста

[mrzgt]

спасибо поправил,но все равно не сработало, так понимаю потому что сначала идет fa.fa , а потом только dropdown

Answer 2

[Александр Зачиналов]

1) Неправильно указан сам селектор, нужно писать

.dropdown.open .fa.fa-minus  {
display: none;
}

т.е. dropdown и open без пробела
2) У вас и после исправления не будет работать, потому что вы иконку положили не вовнутрь dropdown а по соседству, причем перед ним, а не после, тут даже селектор не подобрать, либо положите иконку внутрь и тогда заработает первый вариант, либо после блока dropdown и тогда селектор будет выглядеть так
dropdown.open + .fa.fa-plus {}