html + css + jquery: Toggle Show More/Less Text

后端 未结 5 2024
离开以前
离开以前 2021-01-06 17:05

I\'m working on a personal project and I\'m having a small issue:

This is my code code and currently works: http://jsfiddle.net/gvM3b/:

$(\".show-mor         


        
相关标签:
5条回答
  • 2021-01-06 17:40

    Here's one more solution:

    var i = 0;   
    
    $(".show-more").on('click', function() {
        $(this).text( ++i % 2 ? "(Show Less)" : "(Show More)" );
        $('.text').toggleClass("show-more-height");
    });
    

    The fiddle: http://jsfiddle.net/gvM3b/6/

    0 讨论(0)
  • 2021-01-06 17:44

    Like this:

    $(".show-more").click(function () {        
        $(".text").toggleClass("show-more-height");
        if(!$(".text").hasClass("show-more-height")){
            $(this).text("Show Less");
        }else{
            $(this).text("Show More");
        }
    });
    

    ​ updated fiddle

    0 讨论(0)
  • 2021-01-06 17:50

    Use the ternary operator, for example:

    $(".show-more").click(function () {
      var $this = $(this);
      $this.text($this.text() == "(Show Less)" ? "(Show More)" : "(Show Less)");
      $(".text").toggleClass("show-more-height");
    });​
    

    Or using .text() with a function:

    $(".show-more").click(function () {
      $(this).text(function (i, oldText) {            
        return oldText == "(Show Less)" ? "(Show More)" : "(Show Less)";      
      });
      $(".text").toggleClass("show-more-height");
    });​
    

    DEMO.

    0 讨论(0)
  • 2021-01-06 17:51

    I'd like to recommend the Jquery more less library which takes care of the 'Show More' 'Show Less' problem.

    An alternative: cmtextconstrain

    0 讨论(0)
  • 2021-01-06 18:04

    Update your jQuery:

    $(".show-more").click(function () {
        if($(".text").hasClass("show-more-height")) {
            $(this).text("(Show Less)");
        } else {
            $(this).text("(Show More)");
        }
    
        $(".text").toggleClass("show-more-height");
    });
    

    See http://jsfiddle.net/gvM3b/1/

    0 讨论(0)
提交回复
热议问题