jQuery：切换“显示”时更改按钮内的文本

Question

I've created a toggle button to show and hide a div, but I'd like the text inside the button to change from 'Show Content' to "Hide Content' as you toggle 'show' on the #content div. This is a little over my head as I'm still learning jQuery. Any help would be much appreciated!

EDIT : I've discovered since I have many posts on a single page, and the code is repeated in all posts, when I click the button to show content on one post it shows the content on all the posts. How can this be remedied?

HTML

<div class="post-content">
  <button id='content-button'>Show Content</button>
  <div id='content'>Hello World</div>
</div>

CSS #content { display:none; }

JQUERY

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

http://jsfiddle.net/syctdh46/

Answer 1

You can do like this,

jQuery(document).ready(function() {
    jQuery('#content-button').live('click', function(event) {
        $('#content').is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
        jQuery('#content').toggle();
    });
});

Check the visibility of the div using is(":visible") , then change the text

Fiddle

Edit

jQuery('#content-button').live('click', function(event) {
    $(this).next().is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
    $(this).next().toggle();
});

Answer 2

You can use a variable to keep when button is clicked and change text:

jQuery(document).ready(function () {
    var i = 0;
    jQuery('#content-button').live('click', function (event) {
        jQuery('#content').toggle('show');
        if (i == 0) {
            $(this).text("Hide Content");
            i = 1;
        } else {
            $(this).text("Show Content");
            i = 0;
        }
    });
});

fiddle

Answer 3

I would simply code (sorry for the slide effect, but perhaps you are interested in this too):

JQuery('#content-button').live('click', function(event) {    
  JQuery("#content").slideToggle("slow",function(){
    if (JQuery("#content").css("display")=="none"){ 
      JQuery(this).text("Show Content");
    } else {
      JQuery(this).text("Hide Content");
    }
  });
});

Answer 4

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        

        if(jQuery('#content').is(":hidden")){
            jQuery(this).text("Hide Content");
            jQuery('#content').show();
          }
        else{
             jQuery(this).text("Show Content");
             jQuery('#content').hide();
        }
    });
});

Answer 5

Use .text to change text of button

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {        
         jQuery('#content').toggle('show');
////////////////////////////code to change text
        if($('#content-button').text()=="Show Content")
        {
         $('#content-button').text('hide content');
        }
        else
        {
            $('#content-button').text('show content');

        }
       //////////////////////////// 

});});

http://jsfiddle.net/syctdh46/11/

Answer 6

try

jQuery(document).ready(function () {
    jQuery('#content-button').live('click', function (event) {
        jQuery('#content').toggle('show', function () {
            if ($(this).is(":visible")) {

                $('#content-button').text("Show Content");
            } else {
                $('#content-button').text("Hide Content");
            }

        });
    });
});

DEMO

Answer 7

Most of the answers are similar here.

Why not innovate and add a custom function here.

$.fn.toggleText = function(t1, t2){
  if (this.text() == t1) this.text(t2);
  else                   this.text(t1);
  return this;
};

And then just edit you code to use the function. So you can use this function anywhere else in your code. Simplifies thing.

jQuery(document).ready(function(){
    jQuery('#content-button').live('click', function(event) {  
         $(event.target).toggleText('Show Content', 'Hide Content');  //Add this line          
         jQuery('#content').toggle('show');
    });
});