CODEWITHSUNDEEP
jqueryhtml
Claudio
Claudio

Reputation: 904

jQuery - Text toggles only once

I have a simple script that should change from + to - when the Content is open, and backwards.
But now, when it changes to -, it stays as - no matter what. Even if you collapse the content, it still stays as -.

I've tried to reverse the functions, but it just did the same with the +.

jQuery

$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
    if ($("#expanderSign").text() != "+"){
        $("#expanderSign").html("-")
    } else {
        $("#expanderSign").html("+")
    }
    });
});

HTML

<span id="expanderHead" style="cursor:pointer;">
    Lorem ipsum Lorem ipsum Lorem ipsum.
    <span id="expanderSign">+
    </span></span>
    <div id="expanderContent" style="display:none; color: green;">
    <sup><p>Lorem ipsumLorem ipsumLorem ipsum<br>
    Lorem ipsumLorem ipsumLorem ipsumLorem ipsum,<br>
     Lorem ipsumLorem ipsumLorem ipsum.</p>
     </sup>
  </div>

Upvotes: 5

Views: 315

Answers (8)

George
George

Reputation: 36794

Your logic is wrong, you're saying if the sign is not currently + (it is -), then set it to -. The sign will always be -.

Change your condition to:

if ($("#expanderSign").text() == "+"){

Or how about using a function with your text() method:

$("#expanderSign").text(function(i,v){
    return v == '-' ? '+' : '-';
})

JSFiddle

Upvotes: 8

Claudio
Claudio

Reputation: 904

I got it working myself actually. It's a bit hacky, but works.

$(document).ready(function(){
                                var expanded = false;
                                var collapsed = true;
                                $("#expanderHead").click(function(){
                                    if (expanded == true) {
                                        expanded = false;
                                        collapsed = true;
                                    } else {
                                        expanded = true;
                                        collapsed = false;
                                    }

                                if (expanded == true) {
                                    $("#expanderSign").html("-");
                                    $("#expanderContent").slideToggle();}

                                if (collapsed == true) {
                                    $("#expanderSign").html("+");
                                    $("#expanderContent").slideToggle();}
                                });
                            });

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79073

If it's not plus, i.e. minus, you want to change it to a plus.

if($("#expanderSign").html() != "+") { // is anything but a '+'
    $("#expanderSign").html("+");
}
else { // is a '+'
    $("#expanderSign").html("-");
}

You do not see any change in your code because you are changing minus signs to a minus, and plus signs to a plus.

Upvotes: 4

Pascalz
Pascalz

Reputation: 2378

in HTML : 

<span id="expanderSign">+</span>
no carriage return-------^

in JS : 

$("#expanderSign").html($("#expanderSign").html() != "+" ? "+" : "-");

Upvotes: 0

Jonathan
Jonathan

Reputation: 1833

You are saying that if it is not != equal to plus i.e. it is minus that you should make it minus:

if ($("#expanderSign").text() != "+"){
    $("#expanderSign").html("-");

So just change != to ==:

if ($("#expanderSign").text() == "+"){
    $("#expanderSign").html("-");

Upvotes: 3

DivinusVox
DivinusVox

Reputation: 1191

The logic is backwards on which sign to display. See fiddle below. 

$(document).ready(function () {
    $("#expanderHead").click(function () {
        $("#expanderContent").slideToggle();
        // Backwards logic
        if ($("#expanderSign").text() != "-") {
            $("#expanderSign").html("-");
        } else {
            $("#expanderSign").html("+");
        }
    });
});

1

Upvotes: 2

gNerb
gNerb

Reputation: 887

"If it does not = + set it to minus"

Basically, if it = '-' set it to '-' is what you have ti set to now. Try changing that != to ==.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337627

Your condition check logic is the wrong way around, try this:

if ($("#expanderSign").text() == "+"){
    $("#expanderSign").html("-")
}
else {
    $("#expanderSign").html("+")
}

Upvotes: 4

Related Questions