CODEWITHSUNDEEP
javascriptjquery
starsinmypockets
starsinmypockets

Reputation: 2294

Help with hiding and fading-in elements with jQuery

Trying to hide the <p class = "hide"> elements, then fade them in by clicking the <li> they are nested within... 

$(document).ready(function(){
  $("p.hide").hide();
  $("li").click(function(){
    ("p.hide").fadein(1000);
   };
  );  
};

and the HTML

<ul>   
   <li>Security</li>
     <p class = "hide">Nulla pharetra facilisis ligula sed ultricies.</p>  
   <li>Scalability</li>
     <p class = "hide">Nulla pharetra facilisis ligula sed ultricies.</p>
</ul>

Am I missing something here? Again, I'm new to jQuery/js and appreciate any help!

Upvotes: 1

Views: 68

Answers (2)

JAAulde
JAAulde

Reputation: 19560

I found some minor syntax issues in your JS:

  • closing paren missing from ready() function call
  • semi-colon following anon function which was passed to click()
  • lowercase 'i' in fadeIn() call

In your HTML, the P elements should be inside the LI elements--as posted it's not valid markup.

Also, your click targets all p.hide elements instead of the one nested inside the clicked li.

For example. Assume:

<ul>   
    <li>
        Security
        <p class="hide">Nulla pharetra facilisis ligula sed ultricies.</p>  
    </li>
    <li>
        Scalability
        <p class="hide">Nulla pharetra facilisis ligula sed ultricies.</p>
    </li>
</ul>

Then use this JS:

$( function()
{
    $( 'p.hide' ).hide();
    $( 'li' ).click( function()
    {
        $( this ).find( 'p.hide' ).fadeIn( 1000 );
    } );  
} );

Here is a live example of your code adjusted to work correctly: http://jsfiddle.net/JAAulde/u22yk/1/

Upvotes: 2

Orbling
Orbling

Reputation: 20602

The problem there is that you will fade in all of the 'p.hide' elements, not just the one within the <li>.

Try this small modification, you need to look at the children of the element in question.

$(document).ready(function(){
  $("p.hide").hide();
  $("li").click(function(){
    $(this).find("p.hide").fadeIn(1000);
   };
  );
};

Upvotes: 1

Related Questions