Toggle text on button (without changing page)

[Jan-Dirk]

I want to change the text on the button without making a page transition. The initial text is 'Show', but when I click the button it should be change to 'hide'.
I have a button in html like this:

<a href="" id="btnShowHide" data-role="button" style="background-color: rgb(135, 196, 66);">Show</a></div>

I have this function to toggle the text:

$("#btnShowHid").kendoMobileButton({
                click: function (e) {
                    var element = document.getElementById('btnShowHide');
                    if (element.innerText === "Hide") {
                        window.localStorage.removeItem(followProjectID);
                        element.innerText = "Show"
                    }
                    else { 
                        window.localStorage.setItem(followProjectID, (followProjectTitle + "|" + followProjectImageUrl + "|" + followProjectDescription));
                        element.innerText = "Hide"
                    }
                    // $("#btnShowHid").kendoMobileButton();
                    e.preventDefault();
                }
            });

However,  the text doesn't change

[Kristian D. Dimitrov]

Hi Jan-Dirk,

 I think the problem is just a typo. I changed the first selector from "$("btnShowHid")" to "$("btnShowHide")"  and it worked like a charm.

Regards,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[Jan-Dirk]

Wow, great find! Seems to work now