How to set multiple CSS display property values with jquery

Question

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 ke

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

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

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

Answer 3

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