Div's width decreases when show slide animation is playing

Question

When my card title is clicked, its content shows or hides with the show slide jquery animation .show('slide', {direction: 'up'}, 'slow') / .hide('slide', {direction: 'up'}, 'slow'. The problem is that during the animation the width of .content-annales decreases so there is a lack of continuity with the .title-annales div on the right side.

Here is an example of the problem: click here

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>');
    });
  }
});

<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>

EDIT : I've tried to replicate the issue on jsfiddle but it works perfectly here. I use a bootstrap based theme (Hestia for Wordpress) and when I remove from the bootstrap css file the property box-sizing: border-box;, it works like in the jsfiddle.

Answer 1

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>

Answer 2

I've finally fixed the issue.

1. Probable cause of the issue

When .show('slide', { direction: 'up'}, 'slow') is executed, jquery-ui sets a fixed width to the selected div which seems to not take into consideration the padding (padding: 10px for .content-annales). See what happened during the jquery animation: I don't really understand why the padding is not taked into account as it works perfectly in the jsfiddle shared in my question. It could be link to box-sizing: border-box; which is set for all html according to my theme. In fact, when I disable it, the issue disappear.

2. My solution

It's quite simple : I've encapsulated .content-annales in a parent div called .content-annales-toggle which has no style except display: none;. My animation now shows/hides up .content-annales-toggle so there is no issue with the padding.

Here is the new code :

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>');
    });
  }
});

<style>
.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-toggle {
display: none; /* edited */
}
.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: block; /* edited */

}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
 <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-toggle">
      <div class="content-annales">
        [...]
      </div>
  </div>
</div>