div class block-wrapper id button div class block-services-eleme nt di

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
<div class="block-wrapper" id="button">
<div class="block-services-element">
<div class="logo-service">
<img src="img/services-nav-line.png" alt="">
<p>statistics</p>
</div>
<div class="button__dropdown" id="button__dropdown">
<img src="img/arrow_drop_down.png" alt="">
</div>
</div>
<div class="dropdown hidden" id="blockInviseble">
<img src="img/main-services.png" alt="">
<div class="text">
<div class="text__item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="text__item">
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.block-wrapper{
padding: 24px 25px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
border-radius: 5px;
background-color: #ffffff;
margin-top: 20px;
}
.block-services-element{
display: flex;
justify-content: space-between;
background-color: white;
}
.logo-service{
display: flex;
justify-content: center;
align-items: center;
text-transform:uppercase
}
.button__dropdown{
margin-right: -15px;
}
.block-services-element img{
max-width: 20px;
margin-right: 25px;
}
/*
Открытие закрыти Service elements
// */
.dropdown {
display: flex;
margin-top: 25px;
position: relative;
justify-content: space-between;
text-align: justify;
}
.hidden{
display: none;
}
.dropdown img{
margin-right: 25px;
}
.dropdown p {
color: #061e37;
font-family: Raleway;
font-size: 15px;
font-weight: 400;
line-height: 25px;
/* Text style for "Lorem ipsu" */
letter-spacing: 0.45px;
}
.text{
padding-right: 15px;
padding-top: 7px;
padding-bottom: 7px;
display: flex;
flex-flow: wrap;
align-content: space-between;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
button.onclick=function getBox() {
var boxhidden=document.getElementById("blockInviseble");
(boxhidden.className==="dropdown hidden")?boxhidden.className="dropdown":boxhidden.className+=" hidden";
// body...
}