CODEWITHSUNDEEP
javascriptjquerysvg
bunnycode
bunnycode

Reputation: 275

Using SVG icons with jQuery toggle

I'm using a jQuery toggle for a show/hide button. Is there a way to incorporate SVG icons (in this case, Octicons)?

$(function () {
        $('.show-button').click(function(){
            $(this).text(function(i,old){
                return old=='Show less' ?  'Show more {% octicon chevron-down height:25 class:"right left" aria-label:toggle %}' : 'Show less';
            });
        });
    });

Right now, this outputs:

[ Show more <svg height="25" class="octicon octicon-chevron-down right left" aria-label="toggle"...]

Thank you!

Upvotes: 0

Views: 701

Answers (2)

Anph
Anph

Reputation: 163

You can try it!

$(function () { $('.show-button').click(function(){ $(this).html(function(i,old){ return old=='Show less' ? 'Show more {% octicon chevron-down height:25 class:"right left" aria-label:toggle %}' : 'Show less'; }); }); });

Upvotes: 1

Pyromonk
Pyromonk

Reputation: 689

Because you are setting text. Consider using html instead.

Additionally, I do not know what your base element is, but having svg's inside buttons or inputs might not be ideal. So you might want to use a button-looking span if you want to adhere to the standards.

Upvotes: 1

Related Questions