Hello,
I have build FAQ with HTML,CSS,JS it is working perfect besides there is one problem.
when I click on arrow icon to open the panel the arrow icon turns very quickly to apposite side.
I want it to turn very slowly so I used transition syntax but it didn’t help.
this is CSS code:
[codebyte] CSS
.flex-container-contact-page-section2 {
width:100%;
margin-left:0;
padding-left:0;
}
.container-faq{
width:70%;
margin-left:4%;
float:left;
}
.container-faq h2 {
padding:1rem 48px;
color: #ffd978;
}
.accordion {
border:0.2px solid #4b5054;
border-top-left-radius:5px;
border-top-right-radius:5px;
width:60%;
background-color: #4b5054;
color: #ffd978;
cursor: pointer;
padding: 18px;
text-align: left;
font-size: 15px;
transition: 0.4s;
margin-left:4%;
margin-top:1rem;
}
.accordion:after {
content: “\02C5”;
color: #ffd978;;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: “\02C4”;
color: #ffd978;
transition-timing-function: 4s ease-out;
}
.panel {
padding: 0 18px;
background-color:#4b5054;
max-height:0;
overflow: hidden;
text-align:justify;
font-size:1.25rem;
width:60%;
max-width:800px;
margin-left:4%;
color:#ffd978;
border:0.2px solid #4b5054;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
[/codebyte]
[codebyte] HTML
Vaak Gestelde Vragen
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al.
I paste also JS code to be sure:
[codebyte] JS
[/codebyte]
this is my website url : Contact
as you see the active class is created in JS and I use CSS entities as code for arrow icon .
I want to know if this problem can be solved with CSS . I want that when someone click on arrow icon the arrow icon turns slowly to opposite position.
thanks