<div class="flex">
<div id="promo-1" class="block ma">ПРИМЕР 1</div>
<div id="promo-2" class="block ma">ПРИМЕР 2</div>
<div id="promo-3" class="block ma">ПРИМЕР 3</div>
</div>
<div class="flex">
<button class="ma" onclick="var1()">Hide 1</button>
<button class="ma" onclick="var2()">Hide 2</button>
<button class="ma" onclick="var3()">Hide 3</button>
</div>
.block {
background: blue;
width: 100px;
height: 100px;
display: show;
}
.flex {
display:flex;
}
.ma {
margin: auto;
}
function var1() {
const id = 1
const skidka = document.getElementById("promo-"+id);
setTimeout(function () {
skidka.setAttribute("style", "display: none;");
}, 150);
}
function var2() {
const id = 2
const skidka2 = document.getElementById("promo-"+id);
setTimeout(() => {
skidka2.setAttribute("style", "display: none;");
}, 150);
}
function var3() {
const id = 3
const skidka3 = document.getElementById("promo-"+id);
setTimeout(function (arg) {
arg.setAttribute("style", "display: none;");
}, 150, skidka3);
}
This Pen doesn't use any external CSS resources.