HTML markup inside jquery

Question

I want to add a icon next to some link text that makes an accordion expand and collapse. The text already changes from 'See more' to 'See less'. see the working demo - http://bootply.com/106271

So adding:

<span class="glyphicon glyphicon-chevron-up"></span>

stops the text change work.

Here is the broken version trying to add the icon: http://bootply.com/106270

$(document).ready(function(){
    $("#morebtn").click(function(){
        $(this).html($(this).html() == "See more <span class="glyphicon glyphicon-chevron-up"></span>" ? "See less" : "See more <span class="glyphicon glyphicon-chevron-up"></span>");
    });
});

Don't replace the whole html...there are better ways to traverse the DOM. You should just be replacing the text, and changing the classes for the nested span — Matthew Layton
– Matthew Layton, Commented Jan 16, 2014 at 12:05
Its a different question, just so happens its about the same element. — Tom Rudge
– Tom Rudge, Commented Jan 16, 2014 at 12:15

James Donnelly · Accepted Answer · 2014-01-16 12:04:23Z

2

You have mismatching quotes:

"See more <span class="glyphicon glyphicon-chevron-up" ... "
^                     ^                              ^     ^

To fix this, either use single quotes or escape the double quotes:

'See more <span class=" ... " ... '

"See more <span class=\" ... \" ... "

Working Bootply Demo.

answered Jan 16, 2014 at 12:04

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2014-01-16 12:04:21Z

2

Use .indexOf() to check the availability of a particular word. And also keep in mind that dont use " inside of a string which is being constructed by " instead use '

Try,

$(document).ready(function(){
     $("#morebtn").click(function(){
       $(this).html($(this).html().indexOf("See more") > -1 ? "See less" : "See more <span class='glyphicon glyphicon-chevron-up'></span>");
     });
  });

answered Jan 16, 2014 at 12:04

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

alpham8 · Accepted Answer · 2014-01-16 12:25:51Z

Overriding the whole web site html content with

$(this).hmtl("");

Isn´t a good idea.

Instead of using that, you doing it like this:

$(document).ready(function()
                  {
                    $("#morebtn").click(function()
                                        {
                                            $("#morebtn").val($("#morebtn").val().indexOf("See more") === 1 ?
                                                              $("#morebtn").val("See less")
                                                              : $("#morebtn").val('See more <span class="glyphicon glyphicon-chevron-up"></span>'));
                                        }
                                );
                  }
            );

It is also worth to mention, that this line could not work:

"See more <span class="glyphicon glyphicon-chevron-up"

Your JavaScript console should show up a syntax error for this. Because you can´t use implicit the same quotes withou escaping the inner ones. You have to escape your inner double quotes like this:

class=\"glyphicon glyphicon-chevron-up\"

OR: I highly recommend you to use the alternative method with single and double quotes (the order doesn´t matter), because it´s easier readable for human beings. It could be single or double first):

'See more <span class="glyphicon glyphicon-chevron-up"></span>'
// or:
"See more <span class='glyphicon glyphicon-chevron-up'></span>"

Hopefully this has helped you.

Collectives™ on Stack Overflow

HTML markup inside jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related