How To Set Multiple Css Display Property Values With Jquery

Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last

Solution 1:

$('.department-name').addClass('test1');

css:

.test1{
   display : -webkit-box;
   display : -webkit-flex;
   display : -moz-box;
   display : -ms-flexbox;
   display : flex;
}

You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.

Solution 2:

Store it in a variable:

var displayStyle = [
  'display: -webkit-box',
  'display: -webkit-flex',
  'display: -moz-box',
  'display: -ms-flexbox',
  'display: flex'
].join(';');


$(document).ready(function() {
  $(".department-name").attr('style', displayStyle);
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass='department-name'>TEST</div>

Solution 3:

Nevermind. There is an h4 inside that .departmentnamediv that I changed the display property for, so problem solved. Thanks for the feedback though.