1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Toggle help - "Show More" text

Discussion in 'Free Divi Community Forum' started by AdamFA, Jun 17, 2021.

  1. AdamFA

    AdamFA New Member

    Hi all,

    I've found the Toggle module but it doesn't quite do what I want. I would like to be able to do the following:

    Show something like this...

    The graceful lily is a flower... MORE [where the MORE is clickable]

    Then, upon clicking "MORE", the text would switch to different text, e.g....

    The graceful lily is a flower evocative of many symbols, including purity, devotion, rebirth and motherhood and is traditionally used as a wedding flower in China as lilies are tied to 100 years of love.

    READ LESS [where the READ LESS is clickable to return].

    Looking to switch the text instantly rather than have a transitioned open/reveal of the extra text.

    Appreciate any help with this. Thanks!
     
    #1 AdamFA, Jun 17, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  2. AdamFA

    AdamFA New Member


    Ok, so I've got this far (see below). Now I just want to change the font size of the body text. I've changed the size of the "Read More" part, but can't change the size of the main text. Can anyone help??

    <script>
    function AddReadMore() {
    //This limit you can set after how much characters you want to show Read More.
    var carLmt = 150;
    // Text to show when text is collapsed
    var readMoreTxt = " ... Read More";
    // Text to show when text is expanded
    var readLessTxt = " Read Less";
    //Traverse all selectors with this class and manupulate HTML part to show Read More
    $(".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);
    }
    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
    $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
    }
    $(function() {
    //Calling function after Page Load
    AddReadMore();
    });
    </script>
    <style>
    .addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
    }
    .addReadMore.showmorecontent .readMore {
    }
    .addReadMore .readMore,
    .addReadMore .readLess {
    color: #1d2327;
    cursor: pointer;
    font-size: 20px;
    }
    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
    }
    </style>
    <body>
    <p class="addReadMore showlesscontent">The graceful lily is a flower evocative of many symbols, including purity, devotion, rebirth and motherhood and is traditionally used as a wedding flower in China as lilies are tied to 100 years of love. Their scent, scale and drama are hard to beat in the flower world, with a variety of colours to choose from, making them universally loved as a gift to a loved one or for an impactful arrangement in the home or office with hours of fragrance. Our collection of long stem varieties are guaranteed to leave a lasting impression.</p>
    </body>
     
    #2 AdamFA, Jun 17, 2021
  3. Divi.Help

    Divi.Help Administrator
    Staff Member

    #3 Divi.Help, Jun 22, 2021
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  4. AdamFA

    AdamFA New Member

    Thanks very much
     
    #4 AdamFA, Jun 22, 2021
(You must log in or sign up to post here.)