CODEWITHSUNDEEP
javascriptjquerydom
Skitterm
Skitterm

Reputation: 4595

jQuery click function -- selector's css not being changed

I'm going nuts over an issue I'm sure is obvious to someone.

I want a certain section of my page to disappear when a button is clicked.

Here's my code:

$(document).ready(function(){
   $('.button').click(function() {
        $('.page-section').css('display', 'none');
   });
});

The script is being referenced correctly. jQuery is being loaded first. If I put an alert('something') inside the click event, it fires.

But for some reason, I am unable to get the css to change.

When I use the same line of code in my console, the css changes as it should.

Any ideas?

Upvotes: 2

Views: 100

Answers (2)

maembe
maembe

Reputation: 1300

Your code seems like it should work. Have you inspected that element with developer tools after clicking the button? You should be able to see what classes are being applied, even if another style is overriding it, for example, if you had .page-section{display:block !important;} somewhere in your stylesheet, your jQuery wouldn't hide it. It also seems possible that that element is actually being hidden, but it's actually some other element you're trying to hide.

Upvotes: 0

candeias
candeias

Reputation: 131

Try replace this:

 $('.page-section').css('display', 'none');

with this:

 $('.page-section').css({'display':'none'});

or

 $('.page-section').hide();

Hope it helps.

Upvotes: 1

Related Questions