In that case, you might want to use $('.poem-stanza > div:nth-child(2)').addClass('blue_txt');

Keep in mind that :nth-child(n) is 1-based, whereas all the other jQuery selectors are 0-based.

Hope that helps.

$(document).ready(function() {
$(’.poem-stanza > div:eq(1)’).addClass(’blue_txt’);
});

The problem is that when this is applied only the FIRST INSTANCE of “second child div of class .poem-stanza” gets the new class. Please note that the alice.html file has TWO INSTANCES of ‘.poem-stanza > div:eq(1)’.

YKCOWREBBAJ

sevot yhtils eht dna ,gillirb sawT’
;ebaw eht ni elbmig dna eryg diD
,sevogorob eht erew ysmim llA
.ebargtuo shtar emom eht dnA

She puzzled over this for some time, but at last a bright thought struck her. “Why, it’s a Looking-glass book, of course! And if I hold it up to a glass, the words will all go the right way again.”
This was the poem that Alice read.

JABBERWOCKY

‘Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

QUESTION: Why does the 2nd instance get ignored (unprocessed)? How do I modify my statement so that the 2nd instance DOES get processed?

THANKS!

Jon

thanks again for the help

hope all is well

P

Thanks

pablo

pablo

The .next() method only selects the immediate next sibling. If all your h2 and p elements are siblings, you might need to use the nextUntil plugin:

$.fn.nextUntil = function(expr) {
   var match = [];

   // We need to figure out which elements to push onto the array
   this.each(function(){
       // Traverse through the sibling nodes
       for( var i = this.nextSibling; i; i = i.nextSibling ) {
           // Make sure that we're only dealing with elements
           if ( i.nodeType != 1 ) continue;

           // If we find a match then we need to stop
           if ( jQuery.filter( expr, [i] ).r.length ) break;

           // Otherwise, add it on to the stack
           match.push( i );
       }
   });

   return this.pushStack( match, arguments );
};

Then you could do this:

  $(document).ready(function(){

  	$('.accordion h2:first').addClass('active');
  	$('.accordion h2:eq(1)').nextAll('p').hide();

  	$(".accordion h2").click(function(){
      var $theseParas = $(this).nextUntil('h2').slideToggle('slow');

    	$(this).toggleClass('active')
    	  .siblings("h2").removeClass('active').end()
        .siblings('p').not($theseParas).slideUp('slow');
  	});

  });

A couple things: If you know the tag name of the element with class “accordion,” you should probably use it in the selector. For example, “div.accordion” instead of just “.accordion.” Also, you’ll probably be better off if you wrap each group of paragraphs in its own div. It’s easier to select a single div (no need for the nextUntil plugin) and the animation will be smoother.

if anyone could help me out, that would be great.

thanks.

HTML

JQUERY

$(document).ready(function(){

	$(".accordion h2:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h2").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h2").removeClass("active");

	});

});