jQuery Slide Toggle-打开时更改HTML

Question

I have this function to open up a DIV to show content when a "read more" link is clicked. I'd like to change the value of "Read More" to "Close" once the DIV has been expanded.

<div class="container">
  <p class="expand-text">Read more</p>
  <div class="content">
    <div class="full-text">
      <p>Text content here</p>
    </div>                      
  </div>
</div>                            

<script>
 $(".container").click(function() {
   $(this).find('.content').slideToggle();
 });
</script>

Answer 1

   $(".expand-text").click(function() {
       $('.container .content').slideToggle('slow', function() {
             if ( $('.container .content').css("display") == 'none') {
           $(".container .expand-text").html('Read more');
        } else {
            $(".container .expand-text").html('Close');
        }

       });

      });  

Answer 2

$(".container").click(function() {
    $('.expand-text', this).text(function(i, v) {
        return v === 'Close' ? 'Read more' : 'Close'
    })
    $(this).find('.content').slideToggle();
});

http://jsfiddle.net/mBFzE/

Answer 3

Try this

$(".container").click(function () 
{
   $(this).find('.content').slideToggle('slow',
           function () { $(".expand-text").text("Close"); });
});

Just provide a callback function which would be called when your animation will be completed. For more on this go here

Answer 4

You can pass a callback function to slideToggle() . It will be called when the animation ends, and from there you can update your element depending on the visibility of the content:

$(".container").click(function() {
    $(this).find(".content").slideToggle(400, function() {
        var $this = $(this);
        $this.closest(".container").find(".expand-text").text(
            $this.is(":visible") ? "Close" : "Read more");
    });
});

Answer 5

Here's a JS excerpt that could do what you're trying to do:

 $(".container").click(function() {
     var self = this;
     $(this).find('.content').slideToggle(function(){
         var newParagraphValue = undefined;
         var newParagraphValue = $(self).find('.full-text:visible').length > 0 ? "Close" : "Read more";                          
          $(self).find('.expand-text').html(newParagraphValue );    
          self = null;             
     });
 });​