Search code examples
jquerymaterialize

Animate shift in Column Size

Working with Materialize CSS, I'm looking to see if there is a technique where I can animate a shift in column size

For example:

<div id="col1" class="col s6">Some Content</div>
<div id="col2" class="col s6">More Content</div>

Would transition to:

<div id="col1" class="col s8">Some Content</div>
<div id="col2" class="col s4">More Content</div>

Any thoughts or direction would be appreciated.

Solution

  • While Materialize CSS does not have a built-in transition for shifting column sizes. You can animate the transition by specifying a css transition for the desired elements,

    div.col{
    transition: all .3s ease;
}

    and using your preferred jquery method to toggle the classes.

    $('.col').hover(function() {
    $('#col1').toggleClass('s8 s6');
    $('#col2').toggleClass('s4 s6');
});

    jsfiddle