JQuery - click to show div then hide again

Question

I have the following div, which is hidden:

<div class="showDescription 73" style="display:none;">blah blah blah</div>

and then at the side of it:

<div class="more" divtoshow="73" style="cursor:pointer">more...</div>

I want to click the div with class more and it shows the hidden div, then change the word more... to less... , remove class more , add a class canHide to it so when clicked again it will hide the div again. Simple stuff. It becomes this:

<div class="canHide" divtoshow="73" style="cursor:pointer">less...</div>

When i click the word more the hidden div shows and adds a class canHide , but when clicking it again nothing happens and I don't know why.

JQuery - this section works as it should:

$('.more').click(function() { // show hidden div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeIn();
    $(this).removeClass('more');
    $(this).addClass('canHide');
    $(this).html('less...');
});

This section does nothing??

$('.canHide').click(function() { // hide shown div
    var classId = $(this).attr('divToShow');
    $("." + classId).fadeOut();
    alert('hey'); // for test purposes only
    $(this).removeClass('canHide');
    $(this).addClass('more');
    $(this).html('more...');
});

Here be a fiddle

Answer 1

You're changing the class, so that handler (which is bound at runtime), has no idea that that new class exists. Use event delegation:

$(document).on('click', '.canHide', function() { // hide shown div

});

document should be the element that contains the element with the .canHide class and is there at runtime, but since I can't see your HTML, document is a safe bet.

Answer 2

this might be easier

$('.more').click(function() { 
    // show/hide element before .more && toggle text
    $(this).html($(this).html()=='▼'?'▲':'▼').prev('.showDescription').stop().fadeToggle();
});

It also removes the corresponding attributes between the more link and content , as it makes them unnecessary. ie divtoshow/class 73

made a fiddle: http://jsfiddle.net/filever10/zXz3c/

update: here's each piece broken down

$('.more').click(function() {
    // get element
    $(this)
    //if html = ▼ then it should now be ▲, or if html = ▲ then it should now be ▼; else it should be ▼
    .html($(this).html()=='▼'?'▲':'▼')
    //get previous element by class
    .prev('.showDescription')
    //clear its queue to prevent buildup
    .stop()
    //fadeIn if it's hidden or fadeOut if it's visible
    .fadeToggle();
});