how can i add css only to selected div when "more text" is clicked?
hello,
at the moment i have some code that displays more text when clicking the more button but how can i make it so that when that link is clicked only the container for that div changes background color.
this is the code i have:
- jQuery(document).ready(function() {
var showChar = 70;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar -0, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
$('.userBasic').css({'background-color':'red'});
$('.avatar').css({'background-color':'red'});
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
$('.userBasic').css({'background-color':'white'});
$('.avatar').css({'background-color':'white'});
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
this part changes the divs red
- $('.userBasic').css({'background-color':'red'});
$('.avatar').css({'background-color':'red'});
but it changes it for all the <li> tags
thanks
ricky