CODEWITHSUNDEEP
javascriptjquery
Allison
Allison

Reputation: 95

Issues with .remove()

I 've been monkeying around with alternate solutions for my expand/collapse accordion bars for a while now and can't seem to come up with a proper function to replace the trigger words "Open" with "Close" when necessary.

I know this is simple stuff, and in a year hopefully I'll look back and laugh. Until then, any quick help with the jsFiddle http://jsfiddle.net/mtubb/ from someone more experienced then I would be very helpful.

Upvotes: 2

Views: 85

Answers (2)

Samir Adel
Samir Adel

Reputation: 2499

I updated your code in the fiddle you provided and here is the link to the solution

http://jsfiddle.net/SamirAdel/mtubb/25/

Upvotes: 1

Bojangles
Bojangles

Reputation: 101533

It's actually simpler than you're making it :-)

I've updated (and forked) your JSFiddle here. Using a ternary operator, you can just toggle the text in one line.

A ternary operator is short-hand for an if-else statement:

var value = (condition == true) ? trueValue : falseValue

Can be written as:

if(condition == true)
{
    var value = trueValue;
}
else
{
    var value = falseValue;
}

Hopefully what the code below does is reasonably apparent; if the span's content is Close, it's changed to Open, and vice versa.

$('.accord-bar').append("<span>Close</span>");

$('.accord-bar').click(function() {
    $(this).toggleClass('collapsed');

    $(this).find("span").text(($(this).find("span").text() == "Open") ? "Close" : "Open");

    $(this).next('.pairing').slideToggle();
});

Upvotes: 5

Related Questions