Question

This code doesn’t work as intended, what am I doing wrong?

$(document).ready(function(){
  $("a.hide-para").click(function(){
    $('p').hide();
    $(this).html('Show Paragraphs').removeClass('hide-para').addClass('show-para');
  });
  $("a.show-para").click(function(){
    $('p').show();
    $(this).html('Hide Paragraphs').removeClass('show-para').addClass('hide-para');
  });
});

Answer 1

It doesn’t work because you are dynamically adding/removing the class after the elements are bound to specific element/class combinations. That is to say, you are adding the click event to links with a class of “show-para” before there are any links with that class (or maybe the other way around depending on your default)

In either case, jQuery has the live function to get around that, just change your click handlers to .live('click', function(){ })