On my website, I have a feature that switches between a down arrow and an up arrow. You can view it here.
I would like to implement a CSS transition so that there is a brief pause between the switch. How can I achieve this?
Below is the code snippet:
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>