Change CSS in HTML

Question

I have to change a display: none; to a display: block. I'm having troubles and I can't get it to work..

I have to change this:

.colorbox #content,.colorbox #nav,.colorbox #header,
.colorbox #service,.colorbox #footer,
.colorbox #disclaimer{display:none}

with JQuery to a display: block.

Actually I have to change it only in the ID #footer.

I tried with:

$('.colorbox #content,.colorbox #nav,.colorbox #header, .colorbox #service,.colorbox #footer, .colorbox #disclaimer').css('style', 'display: block !important');

or with:

$('.colorbox #content,.colorbox #nav,.colorbox #header,.colorbox #service,
 .colorbox #footer,.colorbox #disclaimer').css("display", "block !important");

or with:

$('#footer').css("display", "block !important");

I'm actually loading a css file from a external website.. (HTML also) Is it possible, that I can't access with a single JQuery method to this files to change their values ?

How can I make it ?

Answer 1

If your #footer has style display: none, than use:

$( "#footer" ).css( "display", "block" )

And remove important tag from css as well.

Answer 2

You can do it many ways. The following are four easy way:

1. By using only jQuery:

$("#footer").hide();

2. Add a class name in CSS and then use addClass with jQuery.

CSS:

.force_hide{
    display: none !important;
}

jQuery:

$("#footer").addClass('force_hide');

3. Use style instead of css:

$("#footer").style('display', 'none', 'important');

4. And if you want to use css then use it like following:

$("#footer").css("cssText", "display: none !important;");

Answer 3

$("#id").css("display", "none");
$("#id").css("display", "block");

or

$('#id').hide();
$('#id').show();

or

$("#id").css({display: "none"});
$("#id").css({display: "block"});

For class you can give it as:

$(".class").css("display", "none");