changing CSS value with jquery

Question

When my adapted-for-no-javascript page loads, one of the styles loaded is this:

//accordion open
.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 100%;
}

That way my accordion is all open and the content is visible for users without javascript.

But when a user that has javascript enabled visits the site, I would like the value to be changed automatically like this:

//accordion collapsed
.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 0;
}

How do I best do that with jQuery?

This is probably quite elementary but I am new to jquery/JS and get a bit lost googling for solutions because all search hits seem to apply to much more complicated cases.

What is the purpose of swap tag? This is probably quite elementary but I am new to jquery/JS and get a bit lost googling for solutions because all search hits seem to apply to much more complicated cases. Your research should have bring you to relevant css() method, here is the DOC: api.jquery.com/css — A. Wolff
– A. Wolff, Commented May 12, 2015 at 11:52

Dogoku · Accepted Answer · 2015-05-12 13:08:02Z

3

Instead of changing or injecting css, I suggest adding a no-js class to the body/html/container and then removing it with jquery.

Your css will look like this

.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 0;
}

.no-js .accordionItemCollapsed, .no-js .accordionItem.is-collapsed {
    max-height: 100%;
}

The jquery is very straightforward

$('html').removeClass('no-js');

This approach is much more efficient than querying the dom for all accordions and then changing the style property of every element.

In addition to that, this can be reused for other parts of the website where you need to have different styling for when js is not available.

edited May 12, 2015 at 13:08

answered May 12, 2015 at 11:50

Dogoku

4,6754 gold badges27 silver badges35 bronze badges

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

3 Comments

Salman Arshad Over a year ago

If you add this class to the HTML element you can place the remove class script in the head section and not wrap it inside document.ready event. Takes care of FOUC issues.

pastic Over a year ago

@dogoku @salman Great, it works! However, I noticed something peculiar. I am using wordpress, so I put the line of jQuery in a file of it's own (since it should go in the header), and enqueue it correctly as a dependency of jQuery. When that file contains only $('html').removeClass('no-js'); I get no FOUC. But when I try with jQuery(function () { jQuery('html').removeClass('no-js'); }); (because I initially thought I needed a function) I get roughly ½ second of FOUC. Is this normal? Does wrapping it as a function make it that much slower to execute?

Salman Arshad Over a year ago

@pastic jQuery(function(){}) fires after the document and synchronous JavaScript has been downloaded. Browser could start displaying the document earlier and thus the FOUC issue. For HTML element you can safely omit document ready since HTML is the first element in the document and by the time browser reads the head tag it is guaranteed that it has seen the HTML tag.

Tushar · Accepted Answer · 2015-05-12 11:45:15Z

1

You cannot change the class definition. If you want to change the properties of element:

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

Set one or more CSS properties for the set of matched elements.

Docs: http://api.jquery.com/css/#css2

If you want to overwrite the properties of the all elements(Not Recommended):

$('body').append('<style>.accordionItemCollapsed, .accordionItem.is-collapsed { max-height: 0; } </style>');

I'll suggest you should shoud take advantage of open/close events of accordion:

// accordion open event callback
$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', '100%');

// accordion close event callback
$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

answered May 12, 2015 at 11:45

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

1 Comment

Tushar Over a year ago

Down-Voters add comments here, why you have down-voted

Mitya · Accepted Answer · 2015-05-12 11:46:04Z

1

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

answered May 12, 2015 at 11:46

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Comments

w33z33 · Accepted Answer · 2015-05-12 11:50:23Z

1

you dont need jQuery for that task, it would add unnecessary overhead to your application.

simply use the following code, it will only be executed if the visitor has javascript enabled anyway.

document.getElementsByClassName("accordionItemCollapsed accordionItem.is-collapsed").style.maxWidth = "0px";

answered May 12, 2015 at 11:50

w33z33

3783 silver badges18 bronze badges

1 Comment

pastic Over a year ago

Whether I put it in the <head> or just before the </body>, I can't get it to work. This is the snippet I use:

<script>document.getElementsByClassName("accordionItemCollapsed accordionItem.is-collapsed").style.maxHeight = "0px";</script>

Saiyam Gambhir · Accepted Answer · 2015-05-12 11:50:25Z

0

Try this

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

css method takes two parameters, first the style property in your case max-height and second the value in your case 0.

answered May 12, 2015 at 11:50

Saiyam Gambhir

5463 silver badges16 bronze badges

Collectives™ on Stack Overflow

changing CSS value with jquery

5 Answers 5

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related