How can I amend this Javascript to allow HTML to be inserted into the Button text?

Question

I've successfully got the first Javascript code on this answer by @PSL to work, and created my own version (see below). The code basically changes the text within a button each time the button is clicked. But what I can't do is insert HTML into the button text. When I do this all it does is display the HTML code in the button text, rather than execute it. Please could someone tell me how to amend this Javascript below to allow HTML to be inserted into the Button text each time the button is clicked. Thank you!

For example I'm working with

Current HTML

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-down"></i> View More Photos</button>

Javascript

   $(function(){
$('#viewPhotosButton').click(function(){
    $(this).text(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

Desired HTML for Button (after click) icon-chevron-down has changed to icon-chevron-up AND View More Photos has changed to Hide Extra Photos

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos</button>

c.P.u1 · Accepted Answer · 2013-06-12T10:07:15.917

0

Use html() instead of text()

$(function(){
$('#viewPhotosButton').click(function(){
    $(this).html(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

JSFiddle

edited Jun 12 '13 at 10:07

answered Jun 12 '13 at 10:01

c.P.u1

16,664
6
46
41

I thought I had tried that @c.P.u1 but obviously not! Thank you very much! – Metzed Jun 12 '13 at 10:15

score 0 · Answer 2 · answered Jun 12 '13 at 10:02

0

using html() method instead of text() should work

$(function(){
    $('#viewPhotosButton').click(function(){
        $(this).html(function(i,old){
            return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
        });
    });
});

answered Jun 12 '13 at 10:02

Edorka

1,781
12
24

Thank you very much @Edorka - I labelled c.P.u1's reply as the answer which just came in first. Thanks very much for your time. – Metzed Jun 12 '13 at 10:18
Don't worry, his solution came first and with a JSFiddle demo. I'm glad to help. – Edorka Jun 12 '13 at 11:51

score 0 · Answer 3 · answered Jun 12 '13 at 10:54

Since the question is tagged with javascript and not jQuery and if someone comes here looking a non-jQuery answer, here's a non-jQuery alternative:

button_element = document.getElementById('viewPhotosButton');
button_element.onclick = function() {
    var i_element = button_element.firstChild;
    var old_class = i_element.getAttribute('class');
    if (old_class == 'icon-align-left icon-chevron-up') {
        var new_class = 'icon-align-left icon-chevron-down';
        var new_text = 'View more photos';
    }
    else {
        var new_class = 'icon-align-left icon-chevron-up';
        var new_text = 'Hide photos';
    }
    i_element.setAttribute('class', new_class);
    var old_text_node = i_element.nextSibling;
    var text_node = document.createTextNode(new_text);
    button_element.replaceChild(text_node, old_text_node);
}

How can I amend this Javascript to allow HTML to be inserted into the Button text?

3 Answers3