How to change a glyphicons text in javascript

Question

<asp:LinkButton CssClass="btn btn-default search" runat="server" ID="ShowHide" 
OnClientClick="return false;" title="Hide Search"><span id="glyphBtn" 
class="glyphicons glyphicons-plus"></span>Show Search Criteria</asp:LinkButton>

if (blnShowFilter == 'false') {
            document.getElementById('glyphBtn').className = 'glyphicons glyphicons-minus';
        }
        else {
            document.getElementById('glyphBtn').className = 'glyphicons glyphicons-plus';
        }

I have been able to change the actual glyphicon itself but I am struggling to get at the text inside the link button but outside the span. The text 'Show Search Criteria' I want this to change to 'Hide Search Criteria' when the button has been clicked, any ideas?

Answer 1

if (blnShowFilter == 'false') 
    document.getElementById('ShowHide').innerHTML = '<span id="glyphBtn" class="glyphicons glyphicons-minus"></span>Hide Search Criteria';
else 
    document.getElementById('ShowHide').innerHTML = '<span id="glyphBtn" class="glyphicons glyphicons-plus"></span>Show Search Criteria';

Instead of changing the class of glyphicon change the innerHTML of #ShowHide button with updated text and new class of glyphicon