HTML não consigo mudar o texto e icone dentro do botão ao ser clicado

[Matheus Prestes]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<form method="POST">
    
    <button type="button" class="btn glyphicon glyphicon-plus" onclick="mostrar(this)"> save </button>

</form>


<script>
  function mostrar(e) {
  
    if (e.classList.contains("glyphicon-plus")) { //se tem olho aberto
        e.classList.remove("glyphicon-plus"); //remove classe olho aberto
        e.classList.add("glyphicon-minus"); //coloca classe olho fechado
    } 
    
    else { 
      e.classList.remove("glyphicon-minus"); //remove classe olho fechado
      e.classList.add("glyphicon-plus"); //coloca classe olho aberto
    }
  }
</script>

Poderiam me ajudar? Queria entender como eu faço pra fazer um botao que mude de texto e icone igual o das duas fotos, eu tentei fazer um codigo mas so consegui mudar o icone, pdoeriam me ajudar por favor?

[Rui Guilherme]

Você só precisa mudar o texto usando o HTMLElement.innerText

 

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form method="POST">
  <button type="button" class="btn glyphicon glyphicon-plus" onclick="mostrar(this)"> Save</button>
</form>

 

JS:

function mostrar(e) {
  if (e.classList.contains("glyphicon-plus")) { //se tem olho aberto
    e.classList.remove("glyphicon-plus"); //remove classe olho aberto
    e.classList.add("glyphicon-minus"); //coloca classe olho fechado
    e.innerText = " Saved"
  } 
  else { 
    e.classList.remove("glyphicon-minus"); //remove classe olho fechado
    e.classList.add("glyphicon-plus"); //coloca classe olho aberto
    e.innerText = " Save"
  }
}

 

 

Recomendo dar uma lida:

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

[Matheus Prestes]

@Rui Guilherme Valeeeu man, perfeito, era isso mesmo que eu queria, agora so vou terminar de estilizar esse botao, e como eu faria pra deixar esse icone do lado direto do texto?