CODEWITHSUNDEEP
jquerytoggleshow
Daniel
Daniel

Reputation: 376

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

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-more").click(function () {
    $(this).text("(Show Less)");
$(".text").toggleClass("show-more-height");
});​

The issue is that the "(Show More)" text changes to "(Show Less)" but not switches back when needed.

^That's one thing, an additional thing would be if you know how to add the [...] when it says show more but on the text. Been trying to figure it out but had to ask for a little of help, I'm new to jquery.

Thanks!

Upvotes: 3

Views: 22330

Answers (5)

andy boot
andy boot

Reputation: 11737

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

An alternative: cmtextconstrain

Upvotes: 0

Paulo R.
Paulo R.

Reputation: 15609

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/

Upvotes: 0

João Silva
João Silva

Reputation: 91319

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.

Upvotes: 4

Asciiom
Asciiom

Reputation: 9975

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

Upvotes: 2

Gabriel Santos
Gabriel Santos

Reputation: 4974

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/

Upvotes: 6

Related Questions