When my page loads, it displays 4 wrapper divs with the 'col-md-3' class each. However, when an expand button is clicked, 3 of the wrappers become hidden and the clicked one changes to 'col-md-12':
// Expand current wrapper to col-md-12, hide others
$(".wrapper").each(function (index) {
if ($(this).attr("id") === wrapper.attr("id")) {
$(this).removeClass("col-md-3").addClass("col-md-12");
} else {
$(this).hide();
}
});
Is there a simple and fast way to add animation to this process without using the jQuery UI library in my project? I would like to have a slide left to right motion.
So far, the only solution I've found is:
$(this).hide('1000');
However, I would prefer to animate the addition of the "col-md-12" class rather than hiding the other wrappers.