javascript - JQuery - click to show div then hide again - Stack Overflow

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 bees 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

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 bees 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

• javascript
• jquery

Share Improve this question Follow asked Nov 5, 2013 at 14:01 StudioTimeStudioTime 24.1k4040 gold badges128128 silver badges215215 bronze badges 1

• 1 You could use pure CSS: jsfiddle/s2apg/7. – Stefan Dunn Commented Nov 5, 2013 at 14:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

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/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();
});