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
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/
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
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.
I'd like to recommend the Jquery more less library which takes care of the 'Show More' 'Show Less' problem.
An alternative: cmtextconstrain
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/