jQuery hide() method do show element with display:none !important

$('.cls').attr('style','display:block !important');

DEMO

2 ways of doing this,

1) Remove the !important from your .cls class,

.cls{
   display: none;
}

But I assume, you'd have used this elsewhere so it might cause regression.

2) What you could alternatively do is, have a another class and toggle that,

.cls-show{
  display: block !important;
}

And then in your javascript,

$('.cls').addClass(".cls-show");

Then when you need to hide it again, you can,

$('.cls').removeClass('.cls-show');

This will help you keep your markup clean and readable

Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the display behavior using !important property.

Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classes to build the layout.

<div id='container' class="d-flex flex-row align-items-center">
.....
</div>

If you see in the above code, we are using d-flex class for setting display property of this container. Now if I am trying to show/hide this container using

$('#container').show()

or

$('#container').hide()

It will not work as per expectation because of

1. As d-flex is already using !important property
2. Jquery's show() method will add display:block not display:flex to the css property of container.

So I will recommend to use hidden class here.

To show container

$('#container').removeClass('hidden')

To hide container

$('#container').addClass('hidden')