Search code examples
javascriptjqueryhtmlcsswordpress-theming

Div's width decreases when show slide animation is playing


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.


Solution

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