Question

I’m trying to create a Hide/Show button with jQuery. When .cminus is clicked, it needs to hide .arrowwrap and .commentbody and replace it’s own class with cplus. Then if .cplus is clicked opposite needs to happen.

Problem 1: In example below after .cminus is replaced with .cplus, the .cplus does not fire click event when it’s clicked.

(EDIT problem 2 moved to separate ticket)
Problem 2: I’m not reaching the .commentbody right to hide/show it

Html:

<div class="commentline">
    <div class="carrowholder">
        <div class="cminus"></div>
        <div class="arrowwrap">
        </div>
    </div>
    <div class="commentholder">
        <div class="commenttitle">
            Title
        </div>
        <div class="commentbody">
            Body
        </div>
    </div>
</div>

Jquery code:

$('.cminus').click(function(e) {
  $(this).next('.arrowwrap').hide();
  $(this).parent().next('.commentholder .commentbody').hide();
  $(this).removeClass('cminus');
  $(this).addClass('cplus');
})

$('.cplus').click(function(e) {
  alert("clicked cplus");
  $(this).next('.arrowwrap').show();
  $(this).addClass('cminus');
  $(this).removeClass('cplus');
})

Answer 1

Use .toggleClass('cminus'); etc. and then have one event handler OR use .on/.live on the parent element to allow for delegated events.

As for

$(this).parent().next('.commentholder .commentbody').hide();

I think the .commentholder is redundant as you’re specifying next which gets the next sibling.