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

Question

[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"
}

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

Answer 1

[hzzzzl]

один раз на иконку в нужном блоке положить класс с непрозрачностью и прочими анимашками, и потом уже этот класс не убирать

Comments

[Mak_Pet]

Большое спасибо.

Answer 2

[Denis Zinchenko]

У тебя в коде явно указанно что "видимость" нужно добавлять/убирать если показан/не показан элемент, на это намекает даже название функции toggle.

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

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