Question

I want to hide some elements by using the .toggleClass function in jQuery with a class “display: none”. “Click on me” to hide the paragraph. I can get this to work fine without any problems. My question is, how do I set the initial state of the paragraph to “display: none”? So the first time “Click me” is clicked it will show the elements instead of hide them.

CSS

.hidepar {
display: none;
}

Script

    $(function() {
    $('p').click(function() {
    $('p1').toggleClass('hidepar'); 
  });        
});

HTML

<p>Click on me</p>

<p1>Hide</p1>
<p1>Me!</p1>

Thanks!

Answer 1

Use addClass() on page load. I have no idea what a p1 tag is

$(function() {
    $('p1').addClass('hidepar');
    $('p').click(function() {
        $('p1').toggleClass('hidepar'); 
    });
});