Question

The initial part of my code is working. It loads the - sign and then changes to a + sign when clicked. Or it either loads a multiple + signs if needed. Either way, the first initial load is fine. The problem is on the click event. It simply doesn’t work.

$(document).ready(function() {
    if ($('.user-email').length == 1) {
        $('.user-email .section-icon').toggleClass('open');
        $('.section-icon').text('-');
    } else if ($('.user-email').length > 1) {
        $('.section-icon').text('+');
    }

    $('.user-email-text').click(function(event) {
        event.preventDefault();
        if ($(".section-icon:contains('-')")) {
            $('.section-icon').text('+');
        } else if ($(".section-icon:contains('+')")) {
            $('.section-icon').text('-');
        }
        $(this).parent().next().toggle();
        $(this).siblings('.section-icon').toggleClass('open');
        return false;
    });
});​

My fiddle is here http://jsfiddle.net/6QW2K/

Answer 1

if ($(".section-icon:contains('-')")) {

Always evaluates to true, you can use length property:

if ($(".section-icon:contains('-')").length) {

http://jsfiddle.net/f2GZG/

You can also use text method instead of using :contains selector:

$('.section-icon').text(function(i, cur){
   return cur === '+' ? '-' : '+'
}) 

http://jsfiddle.net/UaGrt/