How to change button text on click using jQuery

Question

I have this slideToggle code. When I click the button that says "open", it changes the text to "close". It stays as "close"d even if you click it again so I want to change the text back to "open" when I click on "close" and vice versa.

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        $('#flip').html("close");
        reset ();
    });
});
</script>

<style> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

    <div id="flip">open</div>
    <div id="panel">Hello world!</div>

Community · Accepted Answer · 2017-05-23 10:25:20Z

1

try below code.

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        var t=$('#flip').html()==='close'?'open':'close';
        $('#flip').html(t);
        reset ();
    });
});

Better you can have a boolean to check what you are showing. like:

var showingClose=false;

$(document).ready(function(){
......
    $("#panel").slideToggle("slow");
    if(showingClose){
        $('#flip').html('open');
    }else{
        $('#flip').html('close');
    }
    showingClose = !showingClose;
.......

As pointed out by @filoxo in comment, better to use $('#flip').text() to get/set value.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 28, 2014 at 0:43

amantur

40.6k22 gold badges136 silver badges192 bronze badges

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

2 Comments

filoxo Over a year ago

While this works for the current case, this could break easily and cause issues if another html element is placed inside the div with id="flip". Something like <div><p>Open</p></div>. This is because the .html() method will return the entire inner html value, tags and all. Just a consideration!

amantur Over a year ago

@filoxo sure, but as it is being set from here only there is lesser changes. Moreover seems he is just experimenting. This does not look like production code.

swift · Accepted Answer · 2014-08-28 00:52:26Z

0

Just toggle the css class. Check http://api.jquery.com/toggleclass/

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").toggleClass("flip");
    });
});

css:

#panel
{
    padding:50px;
    display:none;
}
.flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}

edited Aug 28, 2014 at 0:52

answered Aug 28, 2014 at 0:44

swift

1,1087 silver badges9 bronze badges

Comments

filoxo · Accepted Answer · 2014-08-28 01:10:52Z

0

You can leverage jQuery's .is() function in conjunction with the visibility selector to determine if the element is displayed or not. This is better than a boolean in my opinion and is also better for readability. Lastly, using a ternary operator can help you set the button text correctly based on said visibility.

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        var btnTxt = $("#panel").is(":visible") ? "close" : "open";
        $('#flip').text( btnTxt );
        reset ();
    });
});

edited Aug 28, 2014 at 1:10

answered Aug 28, 2014 at 0:54

filoxo

8,3983 gold badges35 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to change button text on click using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related