Люди такая проблему у меня есть блок по которому при нажатии появляется другой блок. Нужно сделать что бы при повторном нажатии появляющийся блок исчезал.
function info() {
r = document.getElementById('mobile_info');
d = document.getElementById('flag');
if(r.style.display != 'block')
r.style.display = 'block';
}
#block_flag{
position: absolute;
height: 60px;
width: 100%;
background-color: #FAF0E6;
}
#mobile_info{
display: none;
position: relative;
width: 100%;
height: 170px;
background-color: #FAF0E6;
z-index: 9998;
padding-top: 70px;
animation: info 0.4s ease-in-out;
}
@keyframes info {
0% {transform: translateY(-170px);}
100% {transform: translateY(0);}
}
#flag{
height: 40px;
width: 40px;
background-color: #27a327;
position: relative;
float: right;
right: 20px;
cursor: pointer;
z-index:9999;
}
#flag:before{
content: '';
display: block;
position: relative;
top: 100%;
border-left: 20px solid #27a327;
border-right: 20px solid #27a327;
border-bottom: 20px solid transparent;
}
#flag:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 26px;
letter-spacing: 4px;
margin-top: 2px;
color: white;
}
#flag:hover::after{
letter-spacing: 1px;
color: red;
}
#flag:active::after{
letter-spacing: 1px;
color: red;
}
.block_info{
position: relative;
height: 150px;
background-color: #ffffff;
border: 5px ridge Crimson;
border-radius: 60px;
}
.in_block_info{
position: absolute;
left: 50%;
transform: translate(-50%);
height: 170px;
width: 90%;
max-width: 350px;
}
.time_work{
height: 60px;
width: 100%;
float: left;
margin-left: 25px;
}
#logo_work{
height: 45px;
width: 45px;
background-image: url(images/work.png);
margin-top: 7px;
}
#work{
height: 60px;
color: black;
}
.number1{
margin-top: 0.3em;
margin-left: 1em;
font-weight: 800;
font-size: 18px;
}
.number2{
margin-top: 0.1em;
margin-left: 1em;
font-size: 18px;
}
.telephone{
height: 60px;
width: 100%;
float: left;
margin-left: 25px;
}
#logo_phone{
height: 45px;
width: 45px;
background-image: url(images/phone.png);
margin-top: 7px;
}
#phone{
height: 60px;
color: black;
}
<div id="block_flag">
<div onclick="info()" id="flag"></div>
<div id="mobile_info">
<div class="block_info">
<div class="in_block_info">
<div class="telephone">
<div id="logo_phone"></div>
<div id="phone">
<div class="number1">Позвоните нам</div>
<div class="number2">+7-000-000-00-00</div>
</div>
</div>
<div class="time_work">
<div id="logo_work"></div>
<div id="work">
<div class="number1">8:00 до 24:00</div>
<div class="number2">C Понедельника по Пятницу</div>
</div>
</div>
</div>
</div>
</div>
</div>