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 ?

What do you mean why not Jquery ? I'm trying with JQuery.. lol — JCoding
– JCoding, Commented Aug 17, 2015 at 7:28
Basically In-line styles will have more priority than the id selector. So your code should also works. I am not sure what have you done in a crack pottery way to make this code not working. Please refer this sample fiddle. jsfiddle.net/hxwx2g97 It is also same like your case. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Aug 17, 2015 at 7:32
As the code you show should work it probably means that your selectors are wrong (please show us the relevant minimal reproducible example html), or you're using jQuery before you've included the jQuery library, or haven't wrapped the jQuery in a $(document).ready(); or equivalent. — David Thomas
– David Thomas, Commented Aug 17, 2015 at 7:38

Rajaprabhu Aravindasamy · Accepted Answer · 2015-08-17 07:34:56Z

1

$("#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");

edited Aug 17, 2015 at 7:34

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Aug 17, 2015 at 7:31

Prudhvi Konda

2971 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JCoding Over a year ago

But this is what I was trying actually? Why is my code not working?

Prudhvi Konda Over a year ago

I don't think you have to pass it as .colorbox #content.. try it directly as $('#content').css("display","block");

Ariful Islam · Accepted Answer · 2015-08-17 07:47:15Z

1

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

By using only jQuery:

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

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

CSS:

.force_hide{
    display: none !important;
}

jQuery:

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

Use style instead of css:

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

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

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

edited Aug 17, 2015 at 7:47

answered Aug 17, 2015 at 7:33

Ariful Islam

7,6837 gold badges38 silver badges55 bronze badges

3 Comments

Ariful Islam Over a year ago

@RajaprabhuAravindasamy I can't understand your question. Could you please describe a little bit more?

Rajaprabhu Aravindasamy Over a year ago

Though OP's code is a kind of trashy one, still it has to work. There's no errors/no mistakes in his code. Then why it is not working? Adding a class will not answer solve his problem. If his code doesn't works, then yours also wont work in his environment.

Ariful Islam Over a year ago

@RajaprabhuAravindasamy with css in jQuery he used !important, which is only problem I think.

Oliver White · Accepted Answer · 2015-08-17 07:49:03Z

0

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

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

And remove important tag from css as well.

answered Aug 17, 2015 at 7:49

Oliver White

6656 silver badges16 bronze badges

Collectives™ on Stack Overflow

Change CSS in HTML

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related