Відділ цифровізації та інформаційної політики
08 Травня, 2022 р., 11:04
.accordionWrapper{padding:30px;background:#fff;float:left;width:80%;box-sizing:border-box;margin:10%; box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}
.accordionItem{
float:left;
display:block;
width:100%;
box-sizing: border-box;
font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
cursor:pointer;
margin:0px 0px 10px 0px;
padding:10px;
background:#2980b9;
color:#fff;
width:100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
}
.close .accordionItemContent{
height:0px;
transition:height 1s ease-out;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float:left;
display:block;
}
.open .accordionItemContent{
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display:block;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
transition: transform 0.4s ease;
box-sizing: border-box;
}
.open .accordionItemHeading{
margin:0px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #bdc3c7;
color: #7f8c8d;
}
About accordions
JavaScript accordions let you squeeze a lot of content into a small space in a Web page.
