Read more read less functionality for mobile view only

Question

I am using read more / read less functionality one of my page, function is performing for desktop and mobile views but I want only for mobile view @media only screen and (max-width:550px), below my current used code.Please help...

 function AddReadMore() { var carLmt = 460; var readMoreTxt = "... Read More"; var readLessTxt = " Read Less"; $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var allstr = $(this).text(); if (allstr.length > carLmt) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>"; $(this).html(strtoadd); } }); $(document).on("click", ".readMore,.readLess", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { AddReadMore(); });

 .addReadMore.showlesscontent.SecSec, .addReadMore.showlesscontent.readLess { display: none; }.addReadMore.showmorecontent.readMore { display: none; }.addReadMore.readMore, .addReadMore.readLess { font-weight: 100; margin-left: 2px; color: #2ab1ce; cursor: pointer; }.addReadMoreWrapTxt.showmorecontent.SecSec, .addReadMoreWrapTxt.showmorecontent.readLess { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="addReadMore showlesscontent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

Answer 1

First: I found two issues:

• your click listener should be added directly to the buttons $(".readMore, .readLess").on("click", function() {
• for your example the char limit should be smaller than 460 since the example string has only ~160 chars, maybe var carLmt = 60;

---

You can achieve the media-query-like solution with an additional condition in your string-length-if:

if (allstr.length > carLmt && window.innerWidth <= 550) {

Since it should also work on resize you need a second event listener. In the attached handler you have to reset the paragraphs and call AddReadMore() again. For reseting you first have to delete the two buttons (remove the click-listener before), then grab the inner text of each parargaph and last overwrite with it the old paragraph content for deleting the <span class='SecSec'> .

$(window).on('resize', function() {
    $(".readMore, .readLess").off("click").remove();
    $('.addReadMore').each(function() {
        $(this).html($(this).text());
    });
    
    AddReadMore();
});

Working example ( resize the window to see the effect ):

 function AddReadMore() { var carLmt = 60; var readMoreTxt = "... Read More"; var readLessTxt = " Read Less"; $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var allstr = $(this).text(); if (allstr.length > carLmt && window.innerWidth <= 550) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>"; $(this).html(strtoadd); } }); $(".readMore, .readLess").on("click", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { AddReadMore(); }); $(window).on('resize', function() { $(".readMore, .readLess").off("click").remove(); $('.addReadMore').each(function() { $(this).html($(this).text()); }); AddReadMore(); });

 .addReadMore.showlesscontent.SecSec, .addReadMore.showlesscontent.readLess { display: none; }.addReadMore.showmorecontent.readMore { display: none; }.addReadMore.readMore, .addReadMore.readLess { font-weight: 100; margin-left: 2px; color: #2ab1ce; cursor: pointer; }.addReadMoreWrapTxt.showmorecontent.SecSec, .addReadMoreWrapTxt.showmorecontent.readLess { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="addReadMore showlesscontent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

---

By the way, there are some things that i would make different (optional):

• since there is no .firstSec in your example delete the first if
• declare the whole buttons as extra vars for readability instead of just their inner text
• wrap the whole code in the document ready function

Working example :

 $(function() { function AddReadMore() { var carLmt = 60; var readMore = "<span class='readMore' title='Click to Show More'>... Read More</span>"; var readLess = "<span class='readLess' title='Click to Show Less'> Read Less</span>"; $(".addReadMore").each(function() { var allstr = $(this).text(); if (allstr.length > carLmt && window.innerWidth <= 550) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span>" + readMore + readLess; $(this).html(strtoadd); } }); $(".readMore, .readLess").on("click", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(window).on('resize', function() { $(".readMore, .readLess").off("click").remove(); $('.addReadMore').each(function() { $(this).html($(this).text()); }); AddReadMore(); }); AddReadMore(); });

 .addReadMore.showlesscontent.SecSec, .addReadMore.showlesscontent.readLess { display: none; }.addReadMore.showmorecontent.readMore { display: none; }.addReadMore.readMore, .addReadMore.readLess { font-weight: 100; margin-left: 2px; color: #2ab1ce; cursor: pointer; }.addReadMoreWrapTxt.showmorecontent.SecSec, .addReadMoreWrapTxt.showmorecontent.readLess { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="addReadMore showlesscontent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>