CODEWITHSUNDEEP
jqueryhtmlcss
Anna Jean
Anna Jean

Reputation: 11

Change elements in css with javascript

I have these 2 elements p.rdmore and ul.post-ul-more with the property display = none in css.

However, on some specific pages, I want to remove these options. I did some research and came up with this code

<script type='text/javascript'>
$('p.rdmore').removeClass('none').addClass('inherit');
$('ul.post-ul-more').removeClass('none').addClass('inherit');
</script>

I tried an if statement for javascript as well but it didn't work. Am I missing anything here?

Upvotes: 1

Views: 78

Answers (3)

SESN
SESN

Reputation: 1283

You can use the following code which will be more efficient.

<script type='text/javascript'>
$(function(){
$('p.rdmore').toggleClass('none inherit');
$('ul.post-ul-more').toggleClass('none inherit');
});
</script>

Upvotes: 0

Andrew Li
Andrew Li

Reputation: 57982

You have to use the css() method to change CSS properties such as display. Try the following:

$('p.rdmore').css("display", "inherit");
$('ul.post-ul-more').css("display", "inherit");

.css() changes the CSS of an element by jQuery. Read more about that here.

If I wanted to change the background, I would just do this:

$("element-right-here").css("background-color", "yellow");

The parameters are .css(propertyName, propertyValue) or .css(propertyName). The latter will return the actual value at the point it is called.

Upvotes: 1

Cfreak
Cfreak

Reputation: 19319

If you just want to show the elements you can use jQuery's methods for that.

$('p.rdmore').show()

And if you want to hide it:

$('p.rdmore').hide()

Or if you are going to go back and forth you can have one event that toggles it:

$('p.rdmore').toggle()

in the last case jQuery will figure out for you if its visible or not and then reverse it.

Upvotes: 1

Related Questions