Как изменить значение кнопки? JQuery

Question

У меня есть кнопка, которая расширяет и скрывает текст. Однако я не уверен, как изменить значение текста. Что я имею в виду, когда я нажимаю кнопку расширения, которая говорит «expand», она не меняется, чтобы «скрыть», она остается «расширяемой». Я попробовал его в JavaScript, но не был полностью уверен в том, как применить его к HTML :(

function btnChanger() { 
    var i = 0; 

    if(i % 2 == 0) 
    { 
     document.getElementById("hide").value="Hide"; 
    } 
    else 
    { 
     document.getElementById("hide").value="Expand"; 
    } 
    i++; 
} 

Если это легче сделать в Jquery Im не слишком уверены, спасибо заранее :) Вот Jfiddle: https://jsfiddle.net/dmgnsx17/3/

Answer 1

Вы можете использовать как jQuery, так и JavaScript. Используйте этот код вместо того, чтобы объявить новые или глобальные переменные, которые могли бы притягивают ошибочные значения:

function btnChanger() { 
    if (document.getElementById("hide").innerHTML == "Hide") 
     document.getElementById("hide").innerHTML = "Expand"; 
    else 
     document.getElementById("hide").innerHTML = "Hide"; 
} 

Чтобы сделать то же самое в JQuery, вы можете использовать:

function btnChanger() { 
    if ($("#hide").html() == "Hide") 
     $("#hide").html("Expand"); 
    else 
     $("#hide").html("Hide"); 
}