Search This Blog

Monday, 13 August 2018

Js to show Hide Content

Js:
var showChar = 250;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
 

    $('.rd-more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content;
             var html = '<div style="display:block">' + c + '<span class="moreellipses">' + ellipsestext+ '</span></div><div class="more content" style="display:none">' + h + '</div><a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).prev('.content').prev().toggle();
        $(this).prev().toggle();
        return false;
    });

CSS:

.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

html:

<div class= "rd-more">Content >/div>



First HTML blog

Hello there


echo 'dddd';
?>

Js to show Hide Content

Js: var showChar = 250;  // How many characters are shown by default     var ellipsestext = "...";     var moretext = "Sh...