Ребят, внизу есть раздвигающееся меню: ЗДЕСЬ. Можете подсказать, как сделать так, чтобы стрелка была видна изначально возле Заголовка, как ЗДЕСЬ. А то у меня только при наведении...
Стиль:
.ac-container{
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: "Open Sans",sans-serif;
text-transform: uppercase;
padding: 0px 27px;
position: relative;
z-index: 20;
display: block;
height: 48px;
cursor: pointer;
color: #fff;
font-weight: bold;
line-height: 48px;
font-size: 18px;
background: #fac05a
}
.ac-container label:hover{
background: #5cacdf;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #fac05a;
color: #fff;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: url(../image/arrow_down.png) no-repeat left;
}
.ac-container input:checked + label:hover:after{
background-image: url(../image/arrow_up.png)
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container input:checked ~ article.ac-small{
height: 100%;
}
.ac-container input:checked ~ article.ac-medium{
height: 100%;
}
.ac-container input:checked ~ article.ac-large{
height: 100%;
}