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?
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.
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.
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>
noneandinheritclasses on these elements?