CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Tom Rudge
Tom Rudge

Reputation: 3272

HTML markup inside jquery

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>");
    });
});

Upvotes: 0

Views: 111

Answers (3)

alpham8
alpham8

Reputation: 1362

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.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

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.

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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>");
     });
  });

Upvotes: 2

Related Questions