@Mak_Pet

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

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

Репозиторий с кодом и мой текущий вариант - https://github.com/MakPet/eCommerece
Результат - https://makpet.github.io/eCommerece/

Нужные фрагменты кода в репозитории

<div class="add-to">
                        <div class="add-to-inner">
                            <div class="heart" id="heart"></div>
                            <button class="wishlist" onclick="toggle(heart)">Add to wishlist</button>
                        </div>
                        <div class="add-to-inner">
                            <div class="copy" id="copy"></div>
                            <button class="compare" onclick="toggle(copy)">Add to Compare</button>
                        </div>
                    </div>


.add-to {
    display: flex;
    justify-content: space-between;

    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.26px;
    color: #000;
}

.add-to-inner {
    display: flex;
}

.wishlist, .compare {
    color: #000;
}

.heart, .copy {
    visibility: hidden;
}

.heart::before {
    font-family: 'icomoon';
    content: "\f004";
    font-size: 16px;
    color: #f14d4d;

    margin-right: 5px;;
}

.copy::before {
    font-family: 'icomoon';
    content: "\f0c5";
    font-size: 16px;
    color: #f14d4d;

    margin-right: 4px;
}


function toggle (ident) {
	(ident.style.visibility == 'visible') ? ident.style.cssText="visibility: hidden" : ident.style.cssText="visibility: visible"
}

function toggle (ident) {
	(ident.style.visibility == 'visible') ? ident.style.cssText="visibility: hidden" : ident.style.cssText="visibility: visible"
}


Пока кнопки работают только в этом блоке

5ddedfa216024114847775.jpeg
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
один раз на иконку в нужном блоке положить класс с непрозрачностью и прочими анимашками, и потом уже этот класс не убирать

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ossiriss
front-end
У тебя в коде явно указанно что "видимость" нужно добавлять/убирать если показан/не показан элемент, на это намекает даже название функции toggle.

function show(ident) {
  (ident.style.visibility !== 'visible') ? ident.style.cssText="visibility: visible" : ''
}


Дублировать дважды одну и ту же функцию тоже совсем не обязательно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы