Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 20, 2024 at 12:58 pm #1452262
    Sabibo

    Hello,
    I need your help. I have a text entry in the icon list. I would like to shorten the text in the frontend by adding “read more”. I have inserted this break, but it is’nt visible in the frontend. What I am doing wrong? And how can I implement this?
    You find the way to the website in the private content. It is the first icon list.
    Thank you for your help.
    Sabine

    June 21, 2024 at 6:34 am #1453440
    Ismael

    Hey Sabine,

    Thank you for the inquiry.

    There is no option for this by default but we can create a script for the read more link. Please add the content in the icon list with this format:

    
<p class="av-icon-list-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <span class="av-icon-list-more-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    <a href="#" class="read-more">Read more</a>
</p>

    Add this script in the functions.php file:

    function ava_custom_script_read_more()
{
    ?>
    <script>
        (function ($)
        {
            function avToggleContent()
            {
                $('.av-icon-list-read-more').click(function(event) {
                    event.preventDefault(); 
                    $(this).prev('.av-icon-list-more-text').slideToggle(); 
                    $(this).text(function(i, text){
                        return text === "Read more" ? "Read less" : "Read more"; 
                    });
                });
            }

            $(document).ready(function ()
            {
                avToggleContent(); 
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_read_more');

    Then include this code in the Quick CSS field:

    .av-icon-list-content .av-icon-list-more-text {
    display: none;
}

.av-icon-list-content .av-icon-list-read-more {
    display: inline-block;
    margin-top: 5px;
    color: blue;
}

.av-icon-list-content .av-icon-list-read-more:hover {
    text-decoration: underline;
    cursor: pointer;
}

    Best regards,
    Ismael

    June 21, 2024 at 12:40 pm #1453763
    Guenni007

    or use normal html details / summary:

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

    <details>
<summary>read more …</summary>
 <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

    PS : there are some ways to animate that details use.

    June 21, 2024 at 3:49 pm #1453956
    Sabibo

    Thanks Ismael, for the detailed code. That’s a lot of code.
    Thanks Guenni007, I try your code. It is short, simple and works. Wonderfull.

    June 21, 2024 at 4:49 pm #1454015
    Guenni007

    see here with a little animation – only css ( code on that example-page )

    setting is:

    <details><summary><span>read more …</span></summary>
   some html 
</details>

    https://webers-testseite.de/details/

    June 21, 2024 at 9:23 pm #1454290
    Mike

    Hi,
    Thanks for sharing Guenni007, this works good.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.