<style>
.t585__accordion {
position: relative;
overflow: hidden;
}
.t585__wrapper>div {
position: relative;
z-index: 1;
}
.t585 .t-col , .bgblk , .t585__title , svg g {
transition: all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
}
.t585 .t-col:hover .bgblk , .openA .bgblk {
top:0%;
}
.t585__circle {
background-color: transparent !important;
}
.t585 .t-col:hover svg g, .openA svg g {
stroke:#fff !important;
}
.t585 .t-col:hover .t585__title , .openA .t585__title {
color: #fff !important;
}
.bgblk {
position: absolute;
top: 100%;
width: 100%;
height: 100%;
background-color: #121820;
z-index: 0;
}
.t585__textwrapper , .t585__title {
padding-left: 15px;
}
.t585__textwrapper {
opacity:0;
transform: translateY(100%);
transition: all 1s ease-in-out;
}
.openA .t585__textwrapper {
transform: translateY(0);
opacity:1;
}
</style>
<script>
$(document).ready(function(){
$('.t585 .t585__accordion').append('<div class="bgblk"></div>');
$('.t585 .t-col').click(function(){
$('.t585 .t-col').removeClass('openA');
$(this).addClass('openA');
});
});
</script>