Div's width decreases when show slide animation is playing
I wasn't able to reproduce the behavior that you mentioned, but have a possible solution for you. Add width: calc(100% - 20px);
to .content-annales
.
jQuery(".title-annales").on("click", function() {
var element = jQuery(this);
if (jQuery(this).next().css('display') === 'none') {
element.css('border-radius', '20px 20px 0px 0px');
jQuery(this).next().show('slide', {
direction: 'up'
}, 'slow', function() {
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
});
} else {
jQuery(this).next().hide('slide', {
direction: 'up'
}, 'slow', function() {
element.css('border-radius', '20px');
element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
});
}
});
.card-annales {
display: block;
margin-bottom: 20px;
}
.title-annales {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px 20px;
background-color: #012f51;
color: #ff6501;
font-size: 1.7em;
border: gray 1px solid;
padding: 10px 30px;
cursor: pointer;
}
.content-annales {
border-left: gray 1px solid;
border-right: gray 1px solid;
border-bottom: gray 1px solid;
padding: 10px;
border-radius: 0px 0px 20px 20px;
display: none;
width: calc(100% - 20px); /* added */
}
.float-right {
float: right;
}
.float-left {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
<div class="title-annales">
<span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
<h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
</div>
<div class="content-annales">
[...]
</div>
</div>