Example A

Get number of paragraphs (including the red box) in the right column and display that number in an alert box.

# of Paragraphs Show / Hide Code

  alert($("div.contentToChange p").size());
        

Example B

Animate a paragraph by using a slide animation.

Slide Up Slide Down Show / Hide Code

  $("div.contentToChange p.paragraph1").slideDown("slow");
  $("div.contentToChange p.paragraph1").slideUp("fast");
        

Example C

Add / Remove text from the end of all <p> elements except the paragraph in the red box.

Add Remove Show / Hide Code

  $("div.contentToChange p:not(.alert)").append(
  "<strong class="addedtext"> This text was just 
  appended to this paragraph</strong>")});
  $("strong.addedtext").remove();
        

Example D

Remove paragraph with fade and animation.

Remove Show Show / Hide Code

  $("div.contentToChange p.thirdparagraph").hide("slow");
  $("div.contentToChange p.thirdparagraph").show("slow");
        

Example E

Change the font weight and color of all Italic text by adding CSS properties and values to all <em> elements.

Change Italics CSS Reset Italics CSS Show / Hide Code

  $("div.contentToChange em").css(
    { color:"#993300", fontWeight:"bold"});
  $("div.contentToChange em").css(
    {color:"#000000", fontWeight:"normal"});
        

Example F

Change the CSS on a paragraph a class value to the <p> element.

Add Class Remove Class Show / Hide Code

  $("p.fifthparagraph").addClass("changeP");
  $("p.fifthparagraph").removeClass("changeP");
        

Example G

Prepend text to all <p> elements except the paragraph in the red box.

Add Remove Show / Hide Code

  $("div.contentToChange p").not(".alert").prepend(
  "<img class='prependImg' src='images/tri_hunter.gif' />")});
  $("img.prependImg").remove();
        

Example H

Change the CSS on all even paragraphs by adding a class value to the <p> element.

Add Class Remove Class Show / Hide Code

  $("div.contentToChange p:even").not(".alert").addClass("extra red");
  $("div.contentToChange p:even").removeClass("extra red");
        

Example I

Change the highlighted rows in a table.

Toggle Toggle Size Show / Hide Code

  $("table#demo tr:nth-child(odd)").addClass('highlight');
  $("button.buttonI1Toggle").click(function()
    {$('table#demo tr').toggleClass('highlight')};
  $("button.buttonI2Toggle").click(function()
    {$('table#demo').toggleClass('small red')});