jquery toggle content inside element

Question

I'm trying to swap out content within a button that toggles a nav collapse.

I currently have the following code;

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <i class="fa fa-expand" aria-hidden="true"></i> Expand</button>
//in js script
$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#page").toggleClass("toggled-2");

});

I want to be able to change the content within to be;

<i class="fa fa-compress" aria-hidden="true"></i> Collapse

This needs to be toggled however, so when you click collapse, it changes back to its original state

Can't seem to figure it out...

Answer 1

This is probably what you are looking for: https://jsfiddle.net/oaftwxt2/

var clicked = 0;

$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#page").toggleClass("toggled-2");

    if(clicked == 0){    
        $(this).html('<i class="fa fa-compress" aria-hidden="true"></i> Collapse');
        clicked = 1;
    }else{
        $(this).html('<i class="fa fa-expand" aria-hidden="true"></i> Expand');
        clicked = 0;
    }
});

Answer 2

You can use the firstElementChild to get the <i> and then change its className according to the actual className, so it will toggle between the two classes you want:

$("#menu-toggle-2").click(function(e) {
  e.preventDefault();
  var i = this.firstElementChild;
  i.className = i.className === 'fa fa-expand' ? 'fa fa-compress' : 'fa fa-expand';
  $("#page").toggleClass("toggled-2");
});