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

Nealime · Accepted Answer · 2015-11-20 11:15:12Z

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

answered Nov 20, 2015 at 11:15

Nealime

1696 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Buzinas · Accepted Answer · 2015-11-20 11:09:32Z

1

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

answered Nov 20, 2015 at 11:09

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

7 Comments

Andreas Louv Over a year ago

Watch out for .className you might wanna use .hasClass(class) instead

Buzinas Over a year ago

There is no need to use jQuery for that, since I can do it with vanilla JS as easy as.

Andreas Louv Over a year ago

And what happens if I somewhere else do: my_i_el.className += ' shit-happends'

Andreas Louv Over a year ago

Also note that firstElementChild is first supported in IE9 developer.mozilla.org/en-US/docs/Web/API/ParentNode/…

Buzinas Over a year ago

That will not happen with a font awesome icon.

|

Ahs N · Accepted Answer · 2015-11-20 11:28:08Z

0

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

answered Nov 20, 2015 at 11:28

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery toggle content inside element

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related