CODEWITHSUNDEEP
javascriptjqueryhtml
grhmstwrt
grhmstwrt

Reputation: 341

jquery toggle content inside element

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...

Upvotes: 5

Views: 530

Answers (3)

Ahs N
Ahs N

Reputation: 8366

This is how I would do it:

$(".navbar-toggle").click(function () {
    if ($(this).text().trim() == "Expand") {
        $(this).find("i").removeClass("fa-expand").addClass("fa-compress");
        $(this).contents()[2].data = "Collapse";
    } else {
        $(this).find("i").removeClass("fa-compress").addClass("fa-expand");
        $(this).contents()[2].data = "Expand";
    }
});

Here is the JSFiddle demo

Upvotes: 0

Nealime
Nealime

Reputation: 169

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;
    }
});

Upvotes: 1

Buzinas
Buzinas

Reputation: 11725

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");
});

Upvotes: 1

Related Questions