I've got a collapsible link which has the unicode arrow on it

►This is a collapsible link

And when someone clicks on it I want it to be turned into the down arrow ▼. However I am having trouble figuring out how to parse to replace this character.

Here is my code:

function CollapsibleContainerTitleClickApp(){
     $(".collapsibleContainerContent.app", $(this).parent()).slideToggle();
     alert($(this).text().trim().charAt(0));
     if ($(this).text.trim().charAt(0) == "\u25B8"{
        alert("inside the if statement");
        $(this).text($(this).text().replace("\u25B8", "\u25BE"));
     }else{
        $(this).text($(this).text().replace("\u25BE", "\u25B8"));
}

Now the first alert always pops up as the actual arrow (►) and viewing the source also has the actual arrow. How can I see if the first character is one arrow, and if so replace it with the other arrow? The second alert statement never fires so it's never passing the condition of the if.

I've got a collapsible link which has the unicode arrow on it

►This is a collapsible link

And when someone clicks on it I want it to be turned into the down arrow ▼. However I am having trouble figuring out how to parse to replace this character.

Here is my code:

function CollapsibleContainerTitleClickApp(){
     $(".collapsibleContainerContent.app", $(this).parent()).slideToggle();
     alert($(this).text().trim().charAt(0));
     if ($(this).text.trim().charAt(0) == "\u25B8"{
        alert("inside the if statement");
        $(this).text($(this).text().replace("\u25B8", "\u25BE"));
     }else{
        $(this).text($(this).text().replace("\u25BE", "\u25B8"));
}

Now the first alert always pops up as the actual arrow (►) and viewing the source also has the actual arrow. How can I see if the first character is one arrow, and if so replace it with the other arrow? The second alert statement never fires so it's never passing the condition of the if.

• javascript
• jquery
• string
• unicode

• 1 Make sure you've got the right key code, as well - ► as you have in your question is \u25ba, \u25b8 is the smaller arrow ▸. – Chris Morgan Commented Dec 8, 2010 at 4:32
• 1 In the future, keep an extra eye on JS syntax errors. You should have spotted this soon enough. In Firefox, hit Ctrl+Shift+J to see the JS error console. Or, better, install Firebug. – BalusC Commented Dec 8, 2010 at 4:34

3 Answers 3

You have multiple errors in your if statement, this is why that branch is never hit.

if ($(this).text.trim().charAt(0) == "\u25B8"{

You forgot the closing ) of the if statement.

Also, you're not invoking the text() method, you're trying to access it as a member, which it isn't.

Your code should look like this:

if ($(this).text().trim().charAt(0) == "\u25B8") {

charCodeAt(index) returns the integer unicode value of the character at the specified index. This is often the easiest way to test individual char values -- especially when they're non-printable, or special in some other way. (docs at w3schools)

Also... be sure you're paring the correct unicode values. "\u25B8" is the "small right arrow" (▸) -- but the arrow you showed in your example is the "large right arrow", which is "\u25BA" (►)

so... a simple example using charCodeAt() and the correct unicode value:

var s = "►This is a collapsible link";
if(s.charCodeAt(0) === 0x25BA) {
   alert( "true!");
}

You can solve this with css and jQuery, too:

CSS:

.collapsible_link:before { content: "\25BC"; }
.collapsed_link:before { content: "\25BA"; }

jQuery:

$('#link').click(function(o) {
   $(o).toggleClass('collapsible_link collapsed_link');
});