Change div text with jQuery Toggle

后端 未结 8 782
粉色の甜心
粉色の甜心 2021-02-01 04:07

When using slideToggle, how to change the Text close/show? I did a simple one, but cannot get the text change back.

Here is what I did:

相关标签:
8条回答
  • 2021-02-01 04:39

    try this demo

    $(document).ready(function(){
    $('.open').toggle(function(){    
            $('.showpanel').slideToggle('slow');
            $(this).text('close');
    }, function(){
        $('.showpanel').slideToggle('slow');
        $(this).text('Show');
    });
    
        $('.open2').toggle(function(){
    
            $('.showpanel2').slideToggle('slow');
            $(this).text('close');
        }, function(){
            $('.showpanel2').slideToggle('slow');
            $(this).text('Show');
        });   
    });​
    
    0 讨论(0)
  • 2021-02-01 04:40

    You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/

    $('.open').click(function(){
        var link = $(this);
        $('.showpanel').slideToggle('slow', function() {
            if ($(this).is(':visible')) {
                 link.text('close');                
            } else {
                 link.text('open');                
            }        
        });       
    });
    
    0 讨论(0)
  • 2021-02-01 04:42

    Here's an updated version http://jsfiddle.net/9EFNK/1/

    You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly

    if( $(this).hasClass('active') )
      $(this).text('open');
    else
      $(this).text('Show');
    
    $(this).toggleClass('active');
    
    0 讨论(0)
  • 2021-02-01 04:42

    check this may be user question is solve Fiddle

    0 讨论(0)
  • 2021-02-01 04:52

    Use this

    jQuery.fn.toggleText = function() {
        var altText = this.data("alt-text");
        if (altText) {
            this.data("alt-text", this.html());
            this.html(altText);
        }
    };
    

    Here is how you use it

     
       jQuery.fn.toggleText = function() {
        	var altText = this.data("alt-text");
    
        	if (altText) {
        		this.data("alt-text", this.html());
        		this.html(altText);
        	}
        };
    
        $('[data-toggle="offcanvas"]').click(function ()  {
    
        	$(this).toggleText();
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <button data-toggle="offcanvas" data-alt-text="Close">Open</button>

    You can even use html provided it's html encoded properly

    0 讨论(0)
  • 2021-02-01 04:56

    Use .toggle()

    Here is Working Demo

    $('.open').click(function(){    
            $('.showpanel').slideToggle('slow');                  
        }).toggle(function() {
                $(this).text('Hide');
            }, function() {
                $(this).text('Show');
            });
    
    0 讨论(0)
提交回复
热议问题