jquery toggle content inside element

grhmstwrt Published at Dev

grhmstwrt

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.